CSS3实现旋转

CSS3实现旋转

transform:rotate();
rotate有三个属性，分别为：rotateX()、rotateY()、rotateZ()。其中rotate等价于rotateZ()。
rotate的值为角度deg，正值为顺时针旋转，负值为逆时针旋转。
相关介绍：
transition-duration：
过渡时间，即完成变形所用的时间，单位为s和ms。
:hover伪类，鼠标移入时起作用。

.box{width: 200px;height: 200px;border: 1px red solid; border-radius: 50%;
        margin-bottom: 100px; overflow: hidden;transition-property: all; transition-duration:1.25s;}
.box img{margin-left: -80px;margin-top:-30px ;}
box:hover{transform: rotate(360deg);}

<div class="box"><img src="./img/1.jpg" alt="" width="300px"></div>

鼠标移入前

鼠标移入后
鼠标移入后，图片延Z轴旋转一圈。