css制作旋转效果
使用 CSS transform 属性实现旋转
通过 transform: rotate() 实现基础旋转效果，参数为角度值（如 45deg）。支持正负角度控制方向：
.element {
transform: rotate(30deg); /* 顺时针旋转30度 */
}结合动画实现持续旋转
使用 @keyframes 定义旋转动画，并通过 animation 属性应用：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: spin 2s linear infinite; /* 2秒匀速无限循环 */
}控制旋转原点
通过 transform-origin 调整旋转中心点（默认元素中心）：
.element {
transform-origin: left top; /* 以左上角为旋转中心 */
animation: spin 1s ease-in-out infinite;
}3D 旋转效果
使用 rotateX()、rotateY() 或 rotateZ() 实现三维旋转：
.element {
transform: rotateX(45deg) rotateY(30deg);
transition: transform 0.5s; /* 添加过渡效果 */
}
.element:hover {
transform: rotateX(90deg);
}性能优化建议
- 对需要频繁旋转的元素添加
will-change: transform;提升渲染性能。 - 优先使用
transform而非margin或position，避免触发重排。
兼容性注意事项
- 旧版本浏览器需添加前缀（如
-webkit-transform）。 - 检测浏览器支持情况可通过
@supports：@supports (transform: rotate(0deg)) { /* 支持时的样式 */ }
