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伪类触发图片高度的放大操作。