2D/3D Transform - 変形
- transform
〔2D/3D変形の適用〕 - transform-origin 〔変形の基点〕
- Transformation Functions〔変形関数〕
- transform-style 〔変形スタイル〕
- perspective 〔要素の表示方法〕
- perspective-origin 〔要素の底位置〕
- backface-visibility 〔要素が裏返っているのを見えるようにするか〕
transform
2D/3D変形の適用
2011/12/1
-webkit-transform: function ... ;
transform: <transform-function> [<transform-function>]* | none;
transformプロパティは、要素に対して2D/3D変換を適用します。 要素の最後の変換値は、リスト内の各エントリの行列の連結を行うことで得られます。 変換関数のセットは、SVGで許可されているものと似ています。
- デフォルト値：none
- 適用：ブロックレベル要素、インラインレベル要素
- 継承：しない
transform-origin
変形の基点
2011/12/1
transform-origin: [ [ [ <%> | <length> | left | center | right ] [ <%> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
-webkit-transform-origin: posx
-webkit-transform-origin: posx posy
-webkit-transform-origin: posx posy
transform-origin: [ | | left | center | right ] [ | | top | center | bottom ] ?
transform-origin: transform-origin: [ left | center | right ] || [ top | center | bottom ]
transform-origin: transform-origin: [ left | center | right ] || [ top | center | bottom ]
transform-originプロパティは、要素の変換の基点を指定します。
- デフォルト値： [2D] 50% 50%／[3D] 50% 50% 0
- ブロックレベル要素、インラインレベル要素
- 継承：しない
Transformation Functions
変形関数
2011/12/1
transformプロパティの値は、変形関数のリストです。 指定された順に適用されます。 複数指定する場合は、空白スペース区切りで指定します。
| 値 | 説明 |
|---|---|
| matrix(<number>, <number>, <number>, <number>, <number>, <number>) | 行列。6つの値からなる変換行列を指定。 |
| translate(<translation-value>[, <translation-value>]) | ベクトル[tx,ty]の2D移動を指定。<ty>を省略した場合は、'0'sが適用されます。 |
| translateX(<translation-value>) | X方向への移動量を指定。 |
| translateY(<translation-value>) | Y方向への移動量を指定。 |
| scale(<number>[, <number>]) | スケーリングベクトル[sx、sy]による2次元スケールの操作を指定。第2引数を省略した場合は、第1引数と同じ値が適用されます。 |
| scaleX(<number>) | [sx,1]スケーリングベクトルでスケールの操作を指定。 |
| scaleY(<number>) | [1,sy]スケーリングベクトルでスケールの操作を指定。 |
| rotate(<angle>) | transform-originで指定されている基点を中心に、回転させる角度を指定。 |
| skewX(<angle>) | X軸に対して傾斜させる角度を指定。 |
| skewY(<angle>) | Y軸に対して傾斜させる角度を指定。 |
| skew(<angle> [, <angle>]) | X軸とY軸に対して傾斜させる角度を指定。第2引数を省略した場合は、Y軸の角度に0が適用されます。 |
transform-style
変形スタイル
2011/12/1
transform-style: flat | preserve-3d
-webkit-transform-style: style;
transform-style: flat | preserve-3d ※Draft
transform-styleプロパティは、入れ子になった要素が3D空間にレンダリングされる方法を定義します。
- デフォルト値： flat
- ブロックレベル要素、インラインレベル要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| flat | 全ての子要素は、要素の2次元平面に平らにレンダリングされます。 そのため、X軸またはY軸に対して要素を回転させると、正または負のZ位置に配置された子要素は、要素の平面に表示されるのではなく、目の前にも後ろになります。 |
| reserve-3d | 子要素は、3D空間での位置を維持します。 |
perspective
要素の表示方法
2011/12/1
perspective: none | <number>
-webkit-perspective: value;
perspective: none | depth ※実験段階
perspectiveプロパティは、要素の奥行きを指定します。 値が'none'または'0'以下の場合、視点変換は適用されません。
- デフォルト値： none
- ブロックレベル要素、インラインレベル要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| none | 視点変換は適用しない。 |
| number | z=0平面への距離をピクセル単位で指定。 |
perspective-origin
要素の底位置
2011/12/1
perspective-origin: [ [ <%> | <length> | left | center | right ] [ <%> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
-webkit-perspective-origin: posx posy
perspective-origin: x-position | x-position y-position ※実験段階
perspectiveプロパティは、perspectiveプロパティの基点を指定します。
- デフォルト値： 50% 50%
- ブロックレベル要素、インラインレベル要素
- 継承：しない
| 値 | 説明 |
|---|---|
| top | 要素のボーダーボックスの上部にY軸の原点を設定します。 |
| center | 要素の境界ボックスの中心にXまたはY軸の原点を設定します。 |
| bottoms | 要素のボーダーボックスの下部にY軸の原点を設定します。 |
| left | 要素のボーダーボックスの左側にX軸の原点を設定します。 |
| right | 要素のボーダーボックスの右側にX軸の原点を設定します。 |
backface-visibility
要素が裏返っているのを見えるようにするか
2011/12/1
backface-visibility: visible | hidden
-webkit-backface-visibility:: visibility;
backface-visibility: visibility; ※実験段階
変換要素が画面に直面していない時に、その要素を表示するかどうかを指定します。 3次元ステージの背景を作成する場合に有用です。
- デフォルト値： visible
- ブロックレベル要素、インラインレベル要素
- 継承：しない
値
| 値 | 説明 |
|---|---|
| visible | 要素が画面を向いていない時も、常に表示します。 |
| hidden | 要素が画面を向いていない場合は、要素を非表示にします。 |