CSSに関するメモ1

ボックス
width : 200px ; height : 50px ;
ボックスの枠（赤枠）
width : 200px ; height : 50px ;
perspective-origin : center center ;
perspective : 200px;



transform : rotateY(30deg) ;



transform : rotateY(50deg) ;



transform : rotateY(80deg) ;





transform : rotateY(110deg) ;





transform : rotateY(150deg) ;



transform : rotateY(180deg) ;



transform : rotateX(30deg) ;

ボックス
width : 200px ; height : 50px ;
ボックスの枠（赤枠）
width : 200px ; height : 50px ;
transform-style : preserve-3d ;

transform : rotateZ(45deg) ;









transform : rotateX(45deg) ;


transform : rotateY(45deg) ;


transform : rotate3d(1,1,0,45deg) ;



transform : rotate3d(1,0,1,45deg) ;






transform : rotate3d(0,1,1,45deg) ;






transform : rotate3d(1,1,1,45deg) ;






transform : translateZ(100px) rotate3d(1,1,1,45deg) ;
手前に移動してから回転。






transform : rotate3d(1,1,1,45deg) translateZ(100px) ;
回転したボックスを法線方向に移動。