例
回し<div>要素を：
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
»それを自分で試してみてください 定義と使用法
transformプロパティは、要素に2Dまたは3D変換を適用します。 このプロパティは、あなたが回転することを可能にする、スケール、移動、スキューなど、要素。
より良いtransformプロパティを理解するために、 デモを見ます 。
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about animatable Try it |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.transform="rotate(7deg)" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-続い番号、-moz-、または接頭辞で働いていた最初のバージョンを指定して-O-です。
| プロパティ | |||||
|---|---|---|---|---|---|
| transform (2D) | 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 (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- |
構文
transform: none|transform-functions|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| none | 何の転換があってはならないことを定義 | それを再生します» |
| matrix( n,n,n,n,n,n ) | 6つの値の行列を用いて、2次元変換を定義します | それを再生します» |
| 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軸に沿って2次元スキュー変換を定義します | それを再生します» |
| skewX( angle ) | X軸に沿って2次元スキュー変換を定義します | それを再生します» |
| skewY( angle ) | Y軸に沿って2次元スキュー変換を定義します | それを再生します» |
| perspective( n ) | 3D変換された要素の斜視図を定義します | |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
テーブルの上に投げられた画像
この例では、作成する方法を示し"polaroid"の画像をし、画像を回転させます。
関連ページ
CSSチュートリアル： CSS 2Dトランスフォーム
CSSチュートリアル： CSS 3Dトランスフォーム
HTML DOMリファレンス： transform property