css制作旋转

使用CSS制作旋转效果

CSS提供了多种方式实现元素的旋转效果，主要通过transform属性结合rotate()函数实现。以下是几种常见方法：

基础旋转

通过transform: rotate()实现元素旋转，角度单位可以是deg（度）或turn（圈）：

.rotate-element {
  transform: rotate(45deg); /* 旋转45度 */
}

动画旋转

使用@keyframes创建持续旋转动画：

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

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

3D旋转

通过rotateX(), rotateY(), rotateZ()实现三维旋转：

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

悬停交互旋转

添加鼠标悬停时的旋转效果：

.hover-rotate {
  transition: transform 0.3s ease;
}
.hover-rotate:hover {
  transform: rotate(90deg);
}

旋转原点控制

通过transform-origin改变旋转中心点：

.custom-origin {
  transform-origin: left top; /* 以左上角为旋转中心 */
  transform: rotate(30deg);
}

性能优化建议

• 对需要频繁旋转的元素使用will-change: transform提升性能
• 优先使用GPU加速的3D变换（如添加translateZ(0)）
• 避免在大量元素上同时使用旋转动画

这些方法可以单独使用或组合使用，根据具体需求调整旋转角度、时长和缓动函数。