CSS3変換-originプロパティ2024 年の最新の入門チュートリアル。このコースでは 例,ブラウザのサポート,属性の定義と指示,文法, について学習できます。
セットポイント位置の回転要素:
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
属性 | |||||
---|---|---|---|---|---|
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- |
変換-origin属性を使用すると、変換素子の位置を変更することができます。
2D変換素子は、X及びY軸の要素を変更することができます。 3D変換素子は、またZ軸要素を変更することができます。
より良い変換-ORIGIN属性を理解するために、参照してくださいデモを 。
注:このプロパティは、最初にしなければならない変換プロパティを。
ヒント:サファリ/ Chromeユーザー:より良い3D変換プロパティを理解するために、参照してくださいデモを 。
デフォルト: | 50%50%0 |
---|---|
継承: | いいえ |
バージョン: | CSS3 |
JavaScriptシンタックス: | オブジェクト.style.transformOrigin = "20%40%」 |
値 | 説明 |
---|---|
X軸 | カスタムビューは、ここで、X軸に配置されています。 可能な値:
|
Y軸 | カスタムビューは、ここで、Y軸に配置されています。 可能な値:
|
Z軸 | カスタムビューは、ここで、Z軸に配置されています。 可能な値:
|