rotate 旋转

详细介绍SVG的rotate旋转变换，学习如何旋转图形元素。通过实例掌握旋转变换的各种应用技巧。 rotate变换将元素绕指定点旋转一定角度，是创建动态效果的重要手段。

基本语法

transform="rotate(angle)"
transform="rotate(angle, cx, cy)"

• angle：旋转角度（度数，正值顺时针）
• cx, cy：旋转中心坐标（可选，默认为原点0,0）

基本旋转

绕原点旋转

<rect x="50" y="30" width="60" height="40" fill="#3498db" opacity="0.3"/>
<rect x="50" y="30" width="60" height="40" fill="#3498db" transform="rotate(30)"/>

<circle cx="0" cy="0" r="3" fill="#e74c3c"/>

绕指定点旋转

<rect x="100" y="40" width="60" height="40" fill="#3498db" opacity="0.3"/>
<rect x="100" y="40" width="60" height="40" fill="#3498db" transform="rotate(45, 130, 60)"/>

<circle cx="130" cy="60" r="3" fill="#e74c3c"/>

旋转方向

正值顺时针旋转，负值逆时针旋转。

<rect x="50" y="50" width="40" height="40" fill="#3498db" transform="rotate(30, 70, 70)"/>
<rect x="200" y="50" width="40" height="40" fill="#e74c3c" transform="rotate(-30, 220, 70)"/>

多角度旋转

<g transform="translate(150, 75)">
  <rect x="-20" y="-20" width="40" height="40" fill="#3498db" opacity="0.2" transform="rotate(0)"/>
  <rect x="-20" y="-20" width="40" height="40" fill="#3498db" opacity="0.4" transform="rotate(15)"/>
  <rect x="-20" y="-20" width="40" height="40" fill="#3498db" opacity="0.6" transform="rotate(30)"/>
  <rect x="-20" y="-20" width="40" height="40" fill="#3498db" opacity="0.8" transform="rotate(45)"/>
  <rect x="-20" y="-20" width="40" height="40" fill="#3498db" transform="rotate(60)"/>
</g>

实用案例

风车效果

<g transform="translate(150, 100)">
  <polygon points="0,-60 10,-20 0,0 -10,-20" fill="#3498db" transform="rotate(0)"/>
  <polygon points="0,-60 10,-20 0,0 -10,-20" fill="#e74c3c" transform="rotate(90)"/>
  <polygon points="0,-60 10,-20 0,0 -10,-20" fill="#2ecc71" transform="rotate(180)"/>
  <polygon points="0,-60 10,-20 0,0 -10,-20" fill="#f39c12" transform="rotate(270)"/>
  
  <circle cx="0" cy="0" r="8" fill="#333"/>
</g>

星形图案

<g transform="translate(150, 75)">
  <polygon points="0,-50 10,-15 45,-15 18,10 28,45 0,25 -28,45 -18,10 -45,-15 -10,-15" fill="#f39c12" transform="rotate(0)"/>
  <polygon points="0,-50 10,-15 45,-15 18,10 28,45 0,25 -28,45 -18,10 -45,-15 -10,-15" fill="#e74c3c" opacity="0.5" transform="rotate(36)"/>
  <polygon points="0,-50 10,-15 45,-15 18,10 28,45 0,25 -28,45 -18,10 -45,-15 -10,-15" fill="#3498db" opacity="0.5" transform="rotate(72)"/>
</g>

时钟刻度

<g transform="translate(150, 100)">
  <line x1="0" y1="-70" x2="0" y2="-60" stroke="#333" stroke-width="3" transform="rotate(0)"/>
  <line x1="0" y1="-70" x2="0" y2="-63" stroke="#333" stroke-width="1" transform="rotate(30)"/>
  <line x1="0" y1="-70" x2="0" y2="-63" stroke="#333" stroke-width="1" transform="rotate(60)"/>
  <line x1="0" y1="-70" x2="0" y2="-60" stroke="#333" stroke-width="3" transform="rotate(90)"/>
</g>

CSS旋转动画

<style>
  .spin {
    animation: spin 3s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<g transform="translate(150, 75)">
  <polygon points="0,-40 10,-10 40,-10 15,10 25,40 0,20 -25,40 -15,10 -40,-10 -10,-10" fill="#3498db" class="spin"/>
</g>

注意事项

1. 角度单位：SVG旋转使用度数，不是弧度
2. 旋转中心：默认绕原点旋转，注意指定旋转中心
3. 坐标系：旋转会改变元素的坐标系方向
4. 性能：旋转动画性能较好，适合创建动态效果

小结

rotate旋转变换是创建动态效果的重要工具，通过指定旋转角度和旋转中心，可以实现各种旋转效果。结合组元素和动画，可以创建风车、时钟、星形等复杂图案。