例
回転した要素の基本配置を設定します。
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%;
}
»それを自分で試してみてください 定義と使用法
変換-originプロパティを使用すると、変換された要素の位置を変更することができます。
2D変換素子のX軸およびY軸を変更することができます。 3D変換は、要素のz軸を変更することができます。
より良い変換-originプロパティを理解するには、 デモを見ます 。
Note:このプロパティは、一緒に使用する必要があります変換プロパティ。
Tip: 3Dトランスフォームのためのより良い、このプロパティを理解するためにデモを見ます 。
| デフォルト値： | 50% 50% 0 |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about 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- |
CSSの構文
transform-origin:x-axis y-axis z-axis|initial|inherit;プロパティ値
| プロパティ値 | 説明 |
|---|---|
| x-axis | ビューは、x軸に配置される場所を定義します。 可能な値：
|
| y-axis | ビューは、y軸に配置される場所を定義します。 可能な値：
|
| z-axis | ビューは、z軸に配置されている場所を定義します(for 3D transformations) 。 可能な値：
|
| 初期 | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| 受け継ぎます | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSチュートリアル： CSS 2Dトランスフォーム
CSSチュートリアル： CSS 3Dトランスフォーム
HTML DOMリファレンス： transformOrigin property