javascript - 图像从小调整到大 - 不调整图像大小

Question

我试图在不调整图像大小的情况下执行此操作，因为当我调整图像大小时，它显示得更宽 - 使其看起来像一个 fat jar 头而不是一个薄 jar 头。此外，由于有更多空间，它会再次重复图像。

这是我的作品:- https://codepen.io/Rosstopherrr/pen/LoKmJa 3

但我一直在尝试做的是具有鼠标悬停功能。 jar 的尺寸需要小一些，但是当光标悬停在产品上时，它会显示大，这样观众就可以清楚地看到产品。基本上，有 6 种不同的受欢迎的饮料瓶和 jar 。客户希望我让用户可以选择使用鼠标光标查看饮用产品，换句话说，产品将放大以清楚地看到它，同时它在 3d 中旋转。

我走对了吗？我已经尝试更改我的 div 类的高度大小，但正如预期的那样，没有奏效。这里有没有改变图像大小的解决方案？？

有什么想法吗？？？

图像尺寸 - 宽度:15.61 厘米 高度:11.6 厘米 分辨率 150 像素/英寸 结果大小 - 248KB

我的代码结果的其余部分在 CODEPEN 链接中 - 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 秒才能完成。