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

Style transform Property

<スタイルオブジェクト

div要素を回転させます:

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

定義と使用法

transformプロパティは、要素の2Dまたは3D変換を適用します。 このプロパティは、あなたが回転することを可能にする、スケール、移動、スキューなど、要素。


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

Internet Explorer 9の代替をサポートし、msTransformプロパティ(2D transforms only)

オペラ、ChromeとSafariは、代替、WebkitTransform性(3Dおよび2D変換)をサポートします。


構文

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

object .style.transform

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

object .style.transform="none| プロパティ値
説明
none 何の転換があってはならないことを定義
matrix( n,n,n,n,n,n ) 6つの値のマトリックスを使用して、2D変換を定義
matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n )
16の値の4×4行列を使用して、3D変換を定義
translate( x,y ) 2D変換を定義します
translate3d( x,y,z ) 3D変換を定義します
translateX( x ) X軸の値のみを使用して、翻訳を定義します
translateY( y ) Y軸の値のみを使用して、翻訳を定義します
translateZ( z ) Z軸の値のみを使用して、3D変換を定義します
scale( x,y ) 2Dスケール変換を定義します
scale3d( x,y,z ) 3Dスケール変換を定義します
scaleX( x ) X軸の値を与えることによって、スケール変換を定義します
scaleY( y ) Y軸の値を与えることによって、スケール変換を定義します
scaleZ( z ) Z軸の値を与えることによって、3Dスケール変換を定義します
rotate( angle ) 2D回転を定義し、角度は、パラメータで指定されています
rotate3d( x,y,z,angle ) 3D回転を定義します
rotateX( angle ) X軸に沿った3D回転を定義します
rotateY( angle ) Y軸に沿った3D回転を定義します
rotateZ( angle ) Z軸に沿った3D回転を定義します
skew( x-angle,y-angle ) X軸およびY軸に沿って2Dスキュー変換を定義
skewX( angle ) X軸に沿った2Dスキュー変換を定義
skewY( angle ) Y軸に沿った2Dスキュー変換を定義
perspective( n ) 3D変換要素の斜視図を定義します
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: なし
戻り値: 要素のtransformプロパティを表す文字列、
CSSのバージョン CSS3

関連ページ

CSSリファレンス: transform property


<スタイルオブジェクト