[分享]css中如何让图片3d旋转

在CSS中，我们可以轻松地使用transform属性来对图片进行各种各样的效果展示，而3D旋转也是其中非常常见的一种方式之一。img{ transition: transform 1s; } img:...

在CSS中，我们可以轻松地使用transform属性来对图片进行各种各样的效果展示，而3D旋转也是其中非常常见的一种方式之一。

img{
   transition: transform 1s;
}
img:hover{
   transform: rotateY(45deg);
} 

以上代码表示了在鼠标悬停到图片上时，图片会沿Y轴旋转45度的效果。同时我们可以设置transition属性来实现平滑的过渡效果。

除了Y轴旋转以外，我们还可以使用X轴和Z轴进行旋转，同时也可以通过perspective属性来设置我们的旋转视角，让旋转更加立体。

.container{
   perspective: 1000px;
}
img{
   transition: transform 1s;
}
img:hover{
   transform: rotateX(45deg);
} 

以上代码表示了将图片绕X轴旋转45度，同时将外层容器的perspective属性设置为1000px，让效果更加立体。