CSS transform-origin 属性

定義と使用法

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軸のどこに配置されるかを定義します。可能な値:

  • left
  • center
  • right
  • length
  • %
y-axis

ビューがY軸のどこに配置されるかを定義します。可能な値:

  • top
  • center
  • bottom
  • length
  • %
z-axis

ビューがZ軸のどこに配置されるかを定義します。可能な値:

  • length

技術的詳細

デフォルト値: 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-