css制作旋转
CSS旋转的实现方法
CSS提供了多种方式实现元素的旋转效果，主要通过transform属性配合旋转函数完成。以下是常见的旋转实现方式：
使用rotate()函数
transform: rotate(angle)是最基础的旋转方法，角度单位可以是deg（度）、rad（弧度）或turn（圈）。正值表示顺时针旋转，负值表示逆时针旋转。
.rotate-element {
transform: rotate(45deg);
/* 旋转45度 */
}3D旋转
通过rotateX()、rotateY()、rotateZ()实现三维空间旋转：
.3d-rotate {
transform: rotateX(20deg) rotateY(30deg);
/* X轴旋转20度，Y轴旋转30度 */
}旋转动画
结合@keyframes和animation创建持续旋转效果：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning {
animation: spin 2s linear infinite;
/* 2秒完成360度旋转，无限循环 */
}变换原点控制
通过transform-origin改变旋转中心点（默认是元素中心）：
.origin-rotate {
transform-origin: left top;
transform: rotate(30deg);
/* 以左上角为原点旋转30度 */
}矩阵变换
使用matrix()或matrix3d()实现复杂变换（包含旋转）：
.matrix-rotate {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
/* 对应30度旋转的2D矩阵 */
}旋转与过渡结合
添加transition使旋转过程平滑：
.transition-rotate {
transition: transform 0.5s ease;
}
.transition-rotate:hover {
transform: rotate(180deg);
}注意事项
- 旋转会影响元素的定位和布局，可能引发父容器高度塌陷
- 连续旋转时考虑性能优化，建议使用
will-change: transform - 3D旋转需要父元素设置
perspective属性才能看到立体效果 - 旋转后的元素可能会超出容器边界，需注意overflow处理
