CSS変換元のプロパティ
例
回転した要素の基本配置を設定します。
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
定義と使用法
このtransform-origin
プロパティを使用すると、変換された要素の位置を変更できます。
2D変換では、要素のx軸とy軸を変更できます。3D変換では、要素のz軸を変更することもできます。
transform-origin
プロパティ
をよりよく理解するには、デモを表示してください。
注:このプロパティは、 transformプロパティと一緒に使用する必要があり ます。
ヒント:3D変換のこのプロパティをよりよく理解するには、デモを表示してください 。
デフォルト値: | 50%50%0 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.transformOrigin = "0 0" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
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- |
CSS構文
transform-origin: x-axis y-axis z-axis|initial|inherit;
プロパティ値
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
関連ページ
CSSチュートリアル:CSS2D変換
CSSチュートリアル:CSS3D変換
HTML DOMリファレンス:transformOriginプロパティ