[分享]css3图片变高

CSS3中的transform属性可以用来对元素进行平移、旋转、缩放等操作，其中缩放操作可以很方便地对图片进行高度的变化。img { transform: scaleY(1.5); } 上述代码中，s...

CSS3中的transform属性可以用来对元素进行平移、旋转、缩放等操作，其中缩放操作可以很方便地对图片进行高度的变化。

img {
  transform: scaleY(1.5);
} 

上述代码中，scaleY表示对图片的垂直方向进行缩放，数值1.5表示将图片的高度放大1.5倍。当数值小于1时，表示缩小图片的高度。

同时，transform属性还支持动画效果，可以让图片的高度变化更加流畅自然。

img {
  transition: transform 1s ease;
}
img:hover {
  transform: scaleY(2);
} 

上述代码中，transition属性表示在1秒的时间内，对transform属性进行平滑过渡，使得图片高度变化更加流畅。鼠标移入图片时，使用:hover伪类触发图片高度的放大操作。