本文介绍了CSS的rotate函数，用于使元素按照指定角度进行旋转。通过设置transform: rotate(45deg)实现顺时针旋转45度，同时提供了一个鼠标悬停时元素旋转360度的案例，展示了rotate在实际应用中的效果。
旋转rotate
- 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
旋转方式
- 顺时针旋转45度
transform: rotate(45deg);
- 案例
...
img {
width: 150px;
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
/* 鼠标经过的时候旋转 */
img:hover {
transform: rotate(360deg);
}
...
...
<-- 这里可以放入一张图片，或者一个有颜色的盒子，目的是为了看的更清晰 -->
<body>
<img src="media/pic.jpg" alt="">
</body>
...
- 输出结果
扫一扫
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
