Search
  1. transform CSS3~〔2D/3D変形の適用〕
  2. transform-origin CSS3~〔変形の基点〕
  3. Transformation Functions〔変形関数〕
  4. transform-style CSS3~〔変形スタイル〕
  5. perspective CSS3~〔要素の表示方法〕
  6. perspective-origin CSS3~〔要素の底位置〕
  7. backface-visibility CSS3~〔要素が裏返っているのを見えるようにするか〕

transform CSS3~
2D/3D変形の適用

2011/12/1

-webkit-transform: function ... ;
transform: <transform-function> [<transform-function>]* | none;

transformプロパティは、要素に対して2D/3D変換を適用します。 要素の最後の変換値は、リスト内の各エントリの行列の連結を行うことで得られます。 変換関数のセットは、SVGで許可されているものと似ています。

  • デフォルト値:none
  • 適用:ブロックレベル要素、インラインレベル要素
  • 継承:しない

transform-origin CSS3~
変形の基点

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
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 CSS3~
変形スタイル

2011/12/1

transform-style: flat | preserve-3d
-webkit-transform-style: style;
transform-style: flat | preserve-3d ※Draft

transform-styleプロパティは、入れ子になった要素が3D空間にレンダリングされる方法を定義します。

  • デフォルト値: flat
  • ブロックレベル要素、インラインレベル要素
  • 継承:しない

transform-styleプロパティの値
説明
flat 全ての子要素は、要素の2次元平面に平らにレンダリングされます。 そのため、X軸またはY軸に対して要素を回転させると、正または負のZ位置に配置された子要素は、要素の平面に表示されるのではなく、目の前にも後ろになります。
reserve-3d子要素は、3D空間での位置を維持します。

perspective CSS3~
要素の表示方法

2011/12/1

perspective: none | <number>
-webkit-perspective: value;
perspective: none | depth ※実験段階

perspectiveプロパティは、要素の奥行きを指定します。 値が'none'または'0'以下の場合、視点変換は適用されません。

  • デフォルト値: none
  • ブロックレベル要素、インラインレベル要素
  • 継承:しない

perspectiveプロパティの値
説明
none視点変換は適用しない。
numberz=0平面への距離をピクセル単位で指定。

perspective-origin CSS3~
要素の底位置

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%
  • ブロックレベル要素、インラインレベル要素
  • 継承:しない
perspective-originプロパティの値
説明
top要素のボーダーボックスの上部にY軸の原点を設定します。
center要素の境界ボックスの中心にXまたはY軸の原点を設定します。
bottoms要素のボーダーボックスの下部にY軸の原点を設定します。
left要素のボーダーボックスの左側にX軸の原点を設定します。
right要素のボーダーボックスの右側にX軸の原点を設定します。

backface-visibility CSS3~
要素が裏返っているのを見えるようにするか

2011/12/1

backface-visibility: visible | hidden
-webkit-backface-visibility:: visibility;
backface-visibility: visibility; ※実験段階

変換要素が画面に直面していない時に、その要素を表示するかどうかを指定します。 3次元ステージの背景を作成する場合に有用です。

  • デフォルト値: visible
  • ブロックレベル要素、インラインレベル要素
  • 継承:しない

backface-visibilityプロパティの値
説明
visible要素が画面を向いていない時も、常に表示します。
hidden要素が画面を向いていない場合は、要素を非表示にします。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop