JavaScriptからSVGのCSS・Styleを操作してX,Y,Z軸それぞれに対して回転させる

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

	
X Y Z

デモページは、こちら