最新のWeb開発のチュートリアル
 

Style transformOrigin Property

<スタイルオブジェクト

回転要素の基本配置を設定します。

document.getElementById("myDIV").style.transformOrigin = "0 0";
»それを自分で試してみてください

定義と使用法

transformOriginプロパティを使用すると、変換要素上の位置を変更することができます。

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

Note:このプロパティは、一緒に使用する必要があります変換プロパティ。


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

transformOriginプロパティは、Internet Explorer 10、Firefox、およびOperaでサポートされています。

Internet Explorer 9のではなく、唯一の2D-変換のため、代替、msTransformOriginプロパティをサポートしています。

クロム、サファリ、オペラは2D-と3D-transfomsの両方のために、代替、WebkitTransformOriginプロパティをサポート。


構文

transformOriginプロパティを返します:

object .style.transformOrigin

transformOriginプロパティを設定します。

object .style.transformOrigin=" プロパティ値
説明
x-axis ビューは、x軸に配置される定義。 可能な値:
  • センター
  • length
  • %
y-axis ビューは、y軸に配置される定義。 可能な値:
  • センター
  • ボトム
  • length
  • %
z-axis ビューは、z軸に配置される定義(for 3D transforms) 。 可能な値:
  • length
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: 50%50%0
戻り値: 要素の変換-originプロパティを表す文字列、
CSSのバージョン CSS3

関連ページ

JavaScriptのスタイルオブジェクト: transform property

CSSリファレンス: transform-origin property


<スタイルオブジェクト