css制作旋转

CSS 旋转的实现方法

使用 transform 属性实现旋转

通过 CSS 的 transform 属性结合 rotate() 函数可以实现元素的旋转效果。rotate() 接受角度值（如 deg、rad、grad 或 turn），正值表示顺时针旋转，负值表示逆时针旋转。

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

旋转动画效果

结合 @keyframes 和 animation 属性可以创建连续的旋转动画。以下示例展示无限循环的 360 度旋转：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin-animation {
  animation: spin 2s linear infinite;
}

3D 旋转效果

通过 rotateX()、rotateY() 或 rotateZ() 可以实现三维空间的旋转。需配合 transform-style: preserve-3d 增强立体感。

.3d-rotate {
  transform: rotateX(30deg) rotateY(45deg);
  transform-style: preserve-3d;
}

旋转中心点调整

默认旋转中心为元素中心，可通过 transform-origin 修改旋转轴心。例如，以下代码将旋转中心设置为左上角：

.custom-origin {
  transform-origin: left top;
  transform: rotate(30deg);
}

性能优化建议

对频繁旋转的元素（如动画）启用硬件加速，避免卡顿：

.optimized-rotate {
  transform: rotate(15deg);
  will-change: transform;
}