CSS3変換-originプロパティ2024 年の最新の入門チュートリアル。このコースでは 例,ブラウザのサポート,属性の定義と指示,文法, について学習できます。

CSS3変換-originプロパティ

セットポイント位置の回転要素:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

»をお試しください

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-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%


文法

transform-origin:x-axis y-axis z-axis;

説明
X軸

カスタムビューは、ここで、X軸に配置されています。 可能な値:

  • センター
  • 長さ
Y軸

カスタムビューは、ここで、Y軸に配置されています。 可能な値:

  • トップ
  • センター
  • ボトム
  • 長さ
Z軸

カスタムビューは、ここで、Z軸に配置されています。 可能な値:

  • 長さ
CSS3変換-originプロパティ
10/30