回転要素の原点を設定します:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Try it Yourself ❯
transform-origin プロパティは、変形する要素の位置を変更することを可能にします。
2D 変形は、要素の x 軸と y 軸を変更することができます。 3D 変形は、要素の z 軸も変更することができます。
プロパティをより深く理解するために、 デモをご覧ください。
注: このプロパティは、transform プロパティと 一緒に使用しなければなりません。
チップ: 3D transforms のこのプロパティをより深く理解するために、 デモをご覧ください。
デフォルト値: | 50% 50% 0 |
---|---|
継承: | 継承する |
アニメーション可否: | 可。animatable を参照 Try it |
バージョン: | CSS3 |
JavaScript 構文: | object.style.transformOrigin="0 0" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。
プロパティ | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
transform-origin: x-axis y-axis z-axis|initial|inherit;
プロパティ値 | 説明 |
---|---|
x-axis | x 軸に配置されたビューの位置を定義します。指定可能な値:
|
y-axis | y 軸に配置されたビューの位置を定義します。指定可能な値:
|
z-axis | z 軸に配置されたビューの位置を定義します(3D 変形用)。指定可能な値:
|
initial | プロパティにデフォルト値を設定します。initial を参照 |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS チュートリアル: CSS 2D Transforms
CSS チュートリアル: CSS 3D Transforms
HTML DOM リファレンス:transformOrigin プロパティ