css制作旋转效果

CSS旋转效果实现方法

CSS可以通过transform属性实现元素的旋转效果，以下是几种常见的旋转方式：

基础旋转

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

动画旋转

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

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

3D旋转效果

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

悬停旋转交互

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

控制旋转原点

.rotate-origin {
  transform-origin: 50% 100%; /* 设置旋转中心点 */
  transform: rotate(30deg);
}

注意事项

• 旋转角度单位可以是deg(度)、rad(弧度)或turn(圈)
• 多个旋转可以组合使用：rotate(45deg) rotateX(30deg)
• 结合transition可以实现平滑的旋转过渡效果
• 3D旋转需要父元素设置transform-style: preserve-3d

这些方法可以灵活组合使用，创建各种复杂的旋转动画和交互效果。