Question

我试图在不调整图像尺寸的情况下执行此操作，因为当我调整图像尺寸时，它显示得更宽-使它看起来像胖罐而不是薄罐。而且，由于有更多空间，它会再次重复图像。

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

但是我一直想做的是具有鼠标悬停功能。罐子的尺寸需要很小，但是当光标将鼠标悬停在产品上时，它将显示较大，因此观看者可以清楚地看到产品。基本上有6种不同的受欢迎的水瓶和罐头。客户希望我让用户可以选择使用鼠标光标查看饮料产品，换句话说，当产品以3d旋转时，产品将放大以清楚地看到它。

我在正确的位置吗？我曾尝试更改div类的高度大小，但没有达到预期的效果。在不更改图片大小的情况下，这里有任何解决方案？

任何想法？

图像尺寸- 宽度：15.61 CM 高度：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秒才能完成。

图像从小到大调整大小-无需调整图像大小

1 个答案: