transform-origin - 変形の基軸を調整する
投稿日: / 更新日:
スタイルシートのtransform-originは、transformで要素に変形効果を与える際の、X軸、Y軸の位置、及び、Z軸方向を見た時の視点の位置を指定するプロパティです。
サンプルコード
transform-originを指定したサンプルコードです。transformと組み合わせないと意味がありません。
div {
transform-origin: top left ;
transform: rotate( 30deg ) ;
}デモ
1つ目はtransform-originにtop leftを指定したデモです。分かりやすいようにアニメーションで常時、回転させています。通常、回転効果を与える際は要素の中央が回転の中心となりますが、このデモではtop leftで指定した通り、X軸(赤)を上端、Y軸(青)を左端に位置付けたため、軸が交差する左上部分が中心となって回転しているのを確認して下さい。
2つ目、3つ目の例は、第3引数で「Z軸(緑)の方向に見た、要素と視点の距離」を指定したものです。2つ目は距離をとったので、要素が奥の方に見えますが、3つ目は距離をとってないので手前の方に見えます。transformプロパティでscaleZ()を有効にする場合などに有用です。
値の指定
1つ目にX軸の位置(上端から距離)、2つ目にY軸の位置(左端からの距離)、3つ目には、Z軸方向の、要素と視点の距離を指定します。2D変形の場合、Z軸は無視されます。それぞれの値は半角スペース( )で区切って下さい。X軸以外は省略することができます。省略された値は初期値の扱いとなります。
/* X軸、Y軸、Z軸を指定する */
#element {
transform-origin: top left 50px ;
}
/* X軸、Y軸を指定する */
#element {
transform-origin: top left ;
}
/* X軸を指定する */
#element {
transform-origin: top ;
}指定できる値の説明は下記の通りです。リンクをクリックするとデモを確認できます。
| 項目 | 説明 |
|---|---|
| inherit | 親要素の値を引き継ぐ。例の場合、div要素のtransform-originには、bodyに指定された値(top left 50px)が引き継がれる。…はずだが、2016年2月現在、機能せず、値は引き継がれない。 |
| initial | プロパティの初期値が適用される。この場合、値は50% 50% 0(中央)となる。 |
| keyword | X軸の場合はleft(0%相当)、right(100%相当)、center(50%相当)の中から指定できます。Y軸の場合はtop(0%相当)、bottom(100%相当)、center(50%相当)から指定できます。 |
| percentage | X軸、Y軸の場合は、要素のサイズに対するパーセンテージで位置を指定できる。 |
| length | pxやemなど、CSSで許可されている単位を利用してサイズを指定します。(単位の一覧) |
ブラウザのサポート
2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。
Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明