CSS3 Pre-Reference



transform-origin

変形の起点

試す

コード

#containe {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);

-moz-transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
}

サンプル


-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform:rotate(90deg);

-moz-transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;

コメントする


対応ブラウザ

Firefox
3.5~
Chrome/Safari
3.1~
Opera
10.50~
InternetExplorer
5.5~

パラメータ

[ [ <パーセンテージ> | <長さ> | left | center | right ] [ <パーセンテージ> | <長さ> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
初期値 50% 50%
適用 ブロックレベル要素とインラインレベル要素
継承 しない
レベル 3
%の解釈 要素のサイズを参照
適用メディア Visual
参考文献 CSS 2D Transforms Module Level 3#3. The ‘transform-origin’ Property

解説

変形の起点を指定します。

rotate(回転)、skew(ゆがみ)の時に影響が現れます。

transform-style”で”preserve-3d” を指定している場合、3つめの引数として奥行きの位置を長さで指定することができます。

トラックバック

投稿されたコメント