CSS3 transform：rotate旋转

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

<div class="box"> <img src="img/cloud.jpg" alt=""> </div>

css

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 100px auto;
  transition: 1s;
}

.box img {
  width: 100%;
}

.box:hover {
  /* 变形：旋转 deg:旋转角度 turn:旋转几周*/
  /* transform: rotate(360deg); */
  transform: rotatey(1turn);
  box-shadow: 10px 10px 10px gray;
  /* transform-origin: 20% 20%; */
}

代码演示：

如果将transform: rotatey(1turn);换成;

transform: rotate3d(100,100,100,360deg);

效果展示：

transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。