CSS動畫更改元素位置

Question

我在圓圈內有一個六邊形。

看到初始場景：https://jsfiddle.net/njzwfvpf/

現在我想添加動畫旋轉六邊形360deg圓

這是用CSS動畫的現有方案（fiddle here）內：

.rotate { 
 
    -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
 
      animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
 
    -webkit-transform-origin: 50% 50%; 
 
      transform-origin: 50% 50%; 
 
} 
 
@-webkit-keyframes rotating { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
}

<svg width="350" height="350"> 
 
    <svg width="350" height="350"> 
 
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <svg viewBox="0 0 600 720" width="295" height="205"> 
 
     <g transform="translate(239, 370)" class="rotate"> 
 
     <path></path> 
 
     <path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path> 
 
     </g> 
 
     <svg viewBox="0 0 600 720" width="507.4" height="799.5"> 
 
     <g transform="translate(105, 395)"> 
 
      <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path> 
 
     </g> 
 
     </svg> 
 
    </svg> 
 
    </svg> 
 
</svg>

該問題m是加入Hexagon改變其位置的動畫，它不在nanymore的圓圈內。

我在做什麼錯？我該如何解決它？

Answer 1

你所面臨的問題是，你正在申請與CSS（rotate(360deg)）的變換，而你已經在SVG（translate(239, 370)）相同的元素上的轉換。你可以用2級的方法解決這個問題：

1. 應用所有變換與CSS這樣你就可以控制動畫與CSS
2. 應用子元素的CSS動畫（六邊形）

下面是如何你可以用第二種方法解決這個問題的例子：

.rotate { 
 
    -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
 
      animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
 
    -webkit-transform-origin: 50% 50%; 
 
      transform-origin: 50% 50%; 
 
} 
 
@-webkit-keyframes rotating { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
    } 
 
}

<svg width="350" height="350"> 
 
    <svg width="350" height="350"> 
 
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
 
    <svg viewBox="0 0 600 720" width="295" height="205"> 
 
     <g transform="translate(239, 370)"> 
 
     <path></path> 
 
     <path class="rotate" d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path> 
 
     </g> 
 
     <svg viewBox="0 0 600 720" width="507.4" height="799.5"> 
 
     <g transform="translate(105, 395)"> 
 
      <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path> 
 
     </g> 
 
     </svg> 
 
    </svg> 
 
    </svg> 
 
</svg>