SVGで生成された3枚のパネルをJavaScriptからCSSのスタイル変化させることでアニメーションさせます。
複数のsvgを重ねて描画するために、svgを含むdivに対して position:relative を、
すべてのsvgに position:absolute をCSSから設定しています。
↓以下が実際のソースサンプルです。
▼JavaScript
<script> var degX =0; var degY =0; var degZ =0; var svg_x = document.getElementById("group_x"); var svg_y = document.getElementById("group_y"); var svg_z = document.getElementById("group_z"); setInterval("draw()",16); function draw(){ degX=(degX+1+360)%360; degY=(degY+1+360)%360; degZ=(degZ+1+360)%360; x="rotateX("+degX+"deg)"; y="rotateY("+degY+"deg)"; z="rotateZ("+degZ+"deg)"; svg_x.style.webkitTransform = x; svg_y.style.webkitTransform = y; svg_z.style.webkitTransform = z; } </script>
▼CSS
▼HTML