css制作旋转
使用 CSS 制作旋转效果
CSS 提供了多种方式实现元素的旋转效果，主要通过 transform 属性结合 rotate() 函数完成。以下是常见的实现方法：
基础旋转
通过 transform: rotate() 实现元素的 2D 旋转。角度单位可以是 deg（度）、rad（弧度）或 turn（圈数）：
.rotate-element {
transform: rotate(45deg); /* 顺时针旋转45度 */
}动画旋转
结合 @keyframes 和 animation 属性实现持续旋转动画：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin 2s linear infinite; /* 2秒匀速无限旋转 */
}3D 旋转
使用 rotateX()、rotateY() 或 rotateZ() 实现三维空间旋转：
.rotate-3d {
transform: rotateX(20deg) rotateY(30deg); /* X/Y轴同时旋转 */
}变换原点控制
通过 transform-origin 调整旋转中心点（默认是元素中心）：
.custom-origin {
transform-origin: left top; /* 以左上角为旋转中心 */
transform: rotate(30deg);
}交互式旋转
通过伪类实现悬停旋转效果：
.hover-rotate:hover {
transform: rotate(180deg);
transition: transform 0.5s ease; /* 添加过渡效果 */
}注意事项
- 旋转元素可能影响文档流布局，必要时可配合
position: absolute或调整父容器尺寸 - 大量旋转动画可能引发性能问题，建议对硬件加速优化：
.optimized-rotate { will-change: transform; backface-visibility: hidden; } - 在移动端使用时注意兼容性，旧版本浏览器可能需要前缀（如
-webkit-transform）
