CSS3 2D変換

CSS3の変換

CSS3の遷移は、我々は、順番に、回転及びストレッチ要素、スケーリング、移動させることができます。

それがどのように動作しますか？

変換の効果は、要素の形状、大きさ及び位置を変更するようになっています。

あなたは、2Dまたは3Dの要素を変換することができます。

ブラウザのサポート

表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。

すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。

Internet Explorerの10は、Firefox、およびOperaはtransformプロパティをサポートしています。

ChromeとSafariは接頭辞-webkit-バージョンが必要です。

注：Internet Explorer 9のは、接頭辞-ms-バージョンが必要です。

2D変換

この章では、2D変換方法を学びます。

• 翻訳（）
• 回転（）
• スケール（）
• スキュー（）
• 行列（）

次の章では、3D変換を学習します。

例

div要素 { 変換： 回転 （30度） ; - MS-変換： 回転 （30度） ; / * IE 9 * / - webkitの-変換： 回転 （30度） ; / * SafariやChromeの* / }

»をお試しください

翻訳（）メソッド

翻訳（）メソッドは、左（X軸）と指定されたパラメータの最上部（Y軸）位置に応じて、要素の現在の位置から移動します。

例

div要素 { 変換： 翻訳 （50ピクセル、100ピクセル） ; - MS-変換： 翻訳 （50ピクセル、100ピクセル） ; / * IE 9 * / - webkitの-変換： 翻訳 （50ピクセル、100ピクセル） ; / * SafariやChromeの* / }

»をお試しください

値（は50px、100pxに）を変換、左から50ピクセルのモバイル要素であり、上から100ピクセルを移動しました。

（）メソッドを回転させます

要素の時計回りの回転中度の与えられた数で、（）メソッドを回転させます。 負の値が許容され、これは、要素の反時計回りの回転です。

例

div要素 { 変換： 回転 （30度） ; - MS-変換： 回転 （30度） ; / * IE 9 * / - webkitの-変換： 回転 （30度） ; / * SafariやChromeの* / }

»をお試しください

値を回転（30度）の要素が時計回りに30度回転しました。

スケール（）メソッド

幅（X軸方向）及び高さ（Y軸）のパラメータに応じて、増加または要素のサイズを小さくスケール（）メソッド：

例

-ms-変換：スケール（2,3） ; / * IE 9 * / -webkit-変換：スケール（2,3）; / *サファリ* /変換：スケール（2,3）; / * 標準の構文 * /

»をお試しください

スケール（2,3）遷移幅は、元のサイズの2倍、および元の高さの3倍の大きさです。

スキュー（）メソッド

スキュー（）メソッド、与えられた角度のための横方向（X軸）と垂直（Y軸）ラインパラメータに従って要素：

例

div要素 { 変換： スキュー （30度、20度） ; - MS-変換： スキュー （30度、20度） ; / * IE 9 * / - webkitの-変換： スキュー （30度、20度） ; / * SafariやChromeの* / }

»をお試しください

（30度、20deg）スキューは、X軸とY軸は約20度、約30度の要素です。

行列（）メソッド

マトリックス（）メソッドと、2D変換の方法は、1つに統合しました。

マトリックス法は、回転、拡大縮小、移動（パン）とチルト機能を含む6つのパラメータを有しています。

例

マトリックスの使用（）div要素に30°を回転させる方法

div要素 { 変換：行列（0.866、0.5 - 0.5、0.866、0、0） ; - MS-変換：行列（ 0.866、0.5 - 0.5、0.866、0、0） ; / * IE 9 * / - webkitの-変換：行列（0.866、0.5、 - 0.5、0.866、0、0） ; / * SafariやChromeの* / }

»をお試しください

新しい変換プロパティ

すべての変換プロパティーのリストは、次のとおりです。

2D変換の方法