Style transformOrigin属性

定義と使用方法

transformOrigin この属性は、変換された要素の位置を変更することができます。

2D変換要素は、要素のx軸とy軸を変更できます。3D変換要素は、z軸も変更できます。

注釈：この属性は、以下と一緒に使用する必要があります transform属性 一緒に使用する。

参照：

JavaScript Styleオブジェクト：transform属性

CSSリファレンスマニュアル：transform-origin属性

例

回転要素の基本位置の設定：

document.getElementById("myDIV").style.transformOrigin = "0 0";

自分で試してみてください

文法

transformOrigin属性の返り値：

object.style.transformOrigin

transformOrigin属性の設定：

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

属性値

値 説明
x-axis

ビューがx軸上での配置位置を定義します。可能な値：

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

ビューがy軸上での配置位置を定義します。可能な値：

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

ビューがz軸上での配置位置を定義します。可能な値：

  • length
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は、親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： 50% 50% 0
返り値： 文字列、要素の transform-origin属性。
CSSバージョン： CSS3

ブラウザのサポート

このテーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0