Изображение, чтобы изменить размер от маленького до большого - без регулировки размера изображения

Question

Я пытаюсь сделать это, не регулируя размер изображения, потому что когда я настраивал размер изображения, оно отображалось шире - создавая впечатление, что толстая банка, чем тонкая банка. Кроме того, он повторял изображение снова, так как было больше места.

Вот моя работа: - https://codepen.io/Rosstopherrr/pen/LoKmJa 3

Но то, что я пытался сделать, это использовать функцию наведения мыши. Размер банки должен быть небольшим, но когда курсор наводит курсор на продукт, он будет отображаться большим, чтобы зритель мог ясно видеть продукт. В основном, есть 6 разных любимых бутылок и банок. Клиент хочет, чтобы у меня была возможность посмотреть на продукт для питья с помощью курсора мыши, иными словами, продукт увеличится, чтобы отчетливо видеть его, пока он вращается в 3d.

Я на правильном пути? Я пытался изменить размер роста моих классов div и, как и ожидалось, не сработал. Какие-либо решения здесь без изменения размера изображения ??

Есть идеи ???

Размеры изображения - Ширина: 15.61 см Высота: 11,6 см Разрешение 150 пикселей / дюймов Результирующий размер - 248 КБ

РЕЗУЛЬТАТ МОЕГО КОДА РЕЗУЛЬТАТ В КОДЕКСНОЙ ССЫЛКЕ - https://codepen.io/Rosstopherrr/pen/LoKmJa 3

КОД JAVASCRIPT НИЖЕ - это не законченный код, а идея того, что я пытаюсь сделать с помощью функции JS.

<script>
    var chnageSize = document.getElementsByClassName('side');
    chnageSize.addEventListener("mouseover", function() {
        chnageSize.style.height = "5000px"
        chnageSize.style.width = "5000px"
    })
    chnageSize();
</script>

Answer 1

Вы можете достичь этого без использования javascript, попробуйте добавить что-то вроде этого в свой CSS:

.bottle:hover {
  transform: rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    translate3d(350px, 190px, 40px)
    scale(1.5);
}

Обратите внимание на scale(1.5); в конце преобразования.Вы можете изменить 1,5 на все, что вы хотите изменить размер большего изображения.1.5 означает, что он будет в 1,5 раза больше.

Если вы хотите, чтобы он анимировался в и из более крупного вида, тогда измените ваш .bottle CSS на что-то вроде этого:

.bottle {
  transition: all 0.2s;
  width: 10.125px;
  -webkit-transform: rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    translate3d(650px, 190px, 40px);
  -moz-transform: rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    translate3d(650px, 190px, 40px);
  transform: rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    translate3d(350px, 190px, 40px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Примечаниеtransition: all 0.2s; в начале.Анимация займет 0,2 секунды.