css旋转效果制作

使用 CSS transform 的 rotate 属性

通过 transform: rotate() 属性实现元素旋转，角度单位可用 deg（度）、rad（弧度）或 turn（圈）。例如旋转 45 度：

.element {
  transform: rotate(45deg);
}

添加过渡动画效果

结合 transition 属性实现平滑旋转动画。以下代码让元素在 0.5 秒内完成旋转：

.element {
  transition: transform 0.5s ease;
}
.element:hover {
  transform: rotate(180deg);
}

使用关键帧动画（@keyframes）

通过 @keyframes 定义连续旋转动画，适用于无限循环等复杂效果：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.element {
  animation: spin 2s linear infinite;
}

旋转中心点调整

默认绕元素中心旋转，可通过 transform-origin 改变旋转轴心。例如绕左下角旋转：

.element {
  transform-origin: left bottom;
  transform: rotate(30deg);
}

3D 旋转效果

使用 rotateX()、rotateY() 或 rotateZ() 实现三维空间旋转，需配合 perspective 属性增强立体感：

.container {
  perspective: 1000px;
}
.element {
  transform: rotateX(45deg);
}

性能优化建议

对频繁旋转的元素启用硬件加速，减少重排开销：

.element {
  transform: translateZ(0);
  will-change: transform;
}