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）