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
