CSS transform-origin 属性
- 前ページ transform
- 下一页 transform-style
定義と使用法
transform-origin 属性は、変換された要素の位置を変更することができます。
2D 転換要素は、要素の x と y 軸を変更できます。3D 転換要素は、さらに Z 軸を変更できます。
transform-origin 属性をよりよく理解するために、このデモ。
Safari/Chrome ユーザー:transform-origin 属性が 3D 転換に使用される場合をよりよく理解するために、このデモ。
注記:この属性は、以下と一緒に使用する必要があります: transform 属性と一緒に使用してください。
transform 属性をよりよく理解するために、このデモ。
参照してください:
CSS3 タウトリアル:CSS3 2D 转换
CSS3 タウトリアル:CSS3 3D 转换
HTML DOM リファレンスマニュアル:transformOrigin 属性
例
回転する要素の基点位置を設定します:
div { transform: rotate(45deg); transform-origin: 20% 40%; }
ページの下部には多くの例があります。
CSS 表記法
transform-origin: x-axis y-axis z-axis;
属性値
値 | 説明 |
---|---|
x-axis |
ビューがX軸のどこに配置されるかを定義します。可能な値:
|
y-axis |
ビューがY軸のどこに配置されるかを定義します。可能な値:
|
z-axis |
ビューがZ軸のどこに配置されるかを定義します。可能な値:
|
技術的詳細
デフォルト値: | 50% 50% 0 |
---|---|
継承性: | no |
バージョン: | CSS3 |
JavaScript 表記法: | object.style.transformOrigin="20% 40%" |
ブラウザのサポート
テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
数字は、属性をサポートする最初のブラウザのバージョンに接頭辞を使用する方法を示しています。-webkit-、-moz-、または -ms- が含まれています。
属性 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
transform-origin (二値記法) |
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 (三値記法) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- 前ページ transform
- 下一页 transform-style