cman.jp > WEBページ作成TOP > CSSリファレンス > 「2Dトランスフォームの原点」
WEBページ作成
広告
transform-origin 「変形の起点」
「transform-origin」は「transform」で変形した要素の起点を指定することができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transform-originの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
transform-origin : X Y [Z]; |
|||||
| プロパティ/設定値 | 意味 | ||||
| X | 横(水平)方向の起点位置 「長さ・大きさの単位」参照 |
||||
| Y | 縦(垂直)方向の起点位置 「長さ・大きさの単位」参照 |
||||
| Z | 直交方向の起点位置 「長さ・大きさの単位」参照 |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
transform のサンプル
「変形前の画像」
「transformにより変形」
transform: perspective(50px)
scaleZ(1.1)
rotateY(20deg);| 起点 | 起点の位置 |
|---|---|
| x 横(水平) |
|
| y 縦(垂直) |
|
| z 直交 |
|
| 関連するCSS(STYLE) | |
|---|---|
| transform | 要素の変形 |
| transform-style | 要素重なり時の３D表示 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
広告