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 就是左上角那个点。
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果