1
我在圆圈内有一个六边形。CSS动画更改元素位置
看到初始场景: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的圆圈内。
我在做什么错?我该如何解决它?