CSSTransform2009-08-09 (日) 20:19:00 (389d)
CSS3により定義されている「CSS Transform」についてかんたんにまとめます。
CSS Transformを使うことにより、図形などを様々に変形させることができます。
CSSTransform
-webkit-transform
- transform関数を指定します。関数はVisual Effects Transform Functionsを参照のこと。
function ... ;
-webkit-transform-origin
- 回転や移動する際の原点（中心点）の指定。「origin-x」、「origin-y」、「origin-z」を一度に指定します。
-webkit-transform-origin: posx
-webkit-transform-origin: posx posy
top:Sets the y origin to the top of the element’s border box. center:Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right, specifies the y origin. If this constant appears after top or bottom, specifies the x origin. If it appears alone, centers both the x and y origin. bottom:Sets the y origin to the bottom of the element’s border box. left:Sets the x origin to the left side of the border box. right:Sets the x origin to the right side of the border box.
-webkit-transform-origin-x
- 回転や移動する際の原点（中心点）の指定。
posx
-webkit-transform-origin-y
- 回転や移動する際の原点（中心点）の指定。
posy
-webkit-transform-origin-z
- 回転や移動する際の原点（中心点）の指定。
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
posz
-webkit-transform-style
- 変形を2Dで行うか、3Dで行うかの指定。デフォルトはflat(2D)になっています。
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
style;
flat:Flatten all children of this element into the 2D plane. preserve-3d:Preserve the 3D perspective.
Transform関連のVisual Effects
-webkit-backface-visibility
- transformで裏返った祭に、裏側に描画するかどうかの指定を行う。
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
visibility;
visible:The element is always visible even when it is not facing the screen. hidden:The element is invisible if it is not facing the screen.
-webkit-perspective
- zを指定します。
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
value;
-webkit-perspective-origin
- 原点（中心点）の指定。
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
posx posy;
top:Sets the y-origin to the top of the element’s border box. center:Sets the x or y origin to the center of the element’s border box. If this constant appears before left or right, specifies the y-origin. If it appears after top or bottom, specifies the x-origin. If appears alone, centers both the x and y origin. bottom:Sets the y-origin to the bottom of the element’s border box. left:Sets the x-origin to the left side of the border box. right:Sets the x-origin to the right side of the border box.
Visual Effects Transform Functions
- 「-webkit-transform: rotate(45deg)」などとしてtransformの関数として使用します。
- 基本的には、matrix（行列変換）rotate（回転）、scale（拡大縮小）、skew（XY軸の回転）、translate（移動）となります。
matrix
matrix3d
perspective
rotate
rotate3d
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
rotateX
rotateY
rotateZ
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
scale
scale3d
scaleX
scaleY
scaleZ
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
skewX
skewY
translate
translate3d
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
translateX
translateY
translateZ
- iPhone独自拡張で、iPhone OS 2.0以降のみ可能です。
参考サイト
Webkit.org
Safari CSS Reference
Google Chrome で CSS Animation して遊んでみた ::: creazy photograph
スポンサード リンク
