JavaScriptからSVGのCSS・Styleを操作して立方体を回転させる

taka_oj
|
2015年10月19日
| コメントはまだありません
| JavaScript、SVG

SVGで6枚のパネルを生成し、 transform-style: preserve-3d や transform:rotate()などをCSSで指定し立方体にします。

そこから立方体を含むdivに対して、JavaScriptから setInterval をつかいCSSのtransform:rotateを変更しています。


↓以下が実際のソースサンプルです。

▼JavaScript

▼CSS

▼HTML


	
   		
	
	
   		 
	
	
   		 
	

   	
		
       	1
	
	
		
   	    2
	
	
		
   	    3
	
	
		
        4
	
	
		
        5
	
	
		
        6

デモページは、こちら

JavaScript、SVG