CSS3トランスフォーム
CSS3は、あなたが翻訳することができ、回転、スケール、および要素をスキュー変換します。
変換は、要素の変化形状、サイズと位置をすることができます効果です。
CSS3は、2Dと3Dの変換をサポートしています。
以下の要素の上にマウス2Dと3D変換との違いを参照するには：
2Dトランスフォーム用のブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-ms-, -webkit-, -moz- 、または-o- specify接頭辞で働いていた最初のバージョンを。
| プロパティ | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2Dトランスフォーム
この章では、次の2D変換の方法について学びます：
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | ヒント：次の章で3D変換について学びます。 |
|---|
translate()メソッド
translate()メソッドは、（X軸とY軸の指定されたパラメータに応じて）現在の位置から要素を移動させます。
次の例では、移動<div>右に50ピクセルの要素を、そして100ピクセル下を現在の位置から：
例
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
»それを自分で試してみてください rotate()メソッド
rotate()メソッドは、指定された度合いに応じて要素を時計回りまたは反時計回りに回転します。
次の例では、回転<div> 20度を持つ要素を時計回りに：
例
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
»それを自分で試してみてください 負の値を使用して要素を反時計回りに回転します。
次の例では、回転<div> 20度を持つ要素を反時計回りに：
例
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
»それを自分で試してみてください scale()メソッド
scale()メソッドが増加または要素（幅と高さを指定されたパラメータに応じて）のサイズが小さくなります。
次の例では、増加<div>その元の幅の2倍であり、元の高さの3倍に要素を：
例
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
»それを自分で試してみてください 次の例では、減少<div>元の幅と高さの半分に要素を：
例
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
»それを自分で試してみてください skewX()メソッド
skewX()メソッドは、指定された角度でX軸に沿った要素をスキュー。
次の例では、スキュー<div>要素をX軸に沿って20度：
例
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
»それを自分で試してみてください skewY()メソッド
skewY()メソッドは、指定された角度によってY軸に沿って要素をスキュー。
次の例では、スキュー<div>要素をY軸に沿って20度：
例
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
»それを自分で試してみてください skew()メソッド
skew()メソッドは、指定された角度によって、XとY軸に沿って要素をスキュー。
次の例では、スキュー<div>要素のX軸に沿って20度、及びY軸に沿って10度。
例
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
»それを自分で試してみてください 二番目のパラメータが指定されていない場合、それはゼロの値を持っています。 だから、次の例では、スキュー<div>要素をX軸に沿って20度：
例
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
»それを自分で試してみてください matrix()メソッド
matrix()メソッドは、すべての2Dを一つにメソッドを変換兼ね備えています。
matrix()メソッドを使用すると、スケール、移動（翻訳）、およびスキューの要素を回転させることができます数学関数を含む6つのパラメータを、取ります。
パラメータは以下の通りである： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
例
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
»それを自分で試してみてください 練習で自分自身をテスト！
CSS3プロパティを変換します
次の表は、2Dは変換プロパティ：
| プロパティ | 説明 |
|---|---|
| transform | 要素に2Dまたは3D変換を適用 |
| transform-origin | あなたが変換された要素上の位置を変更することができます |
2Dは、メソッドの変換します
| 関数 | 説明 |
|---|---|
| matrix(n,n,n,n,n,n) | 6つの値の行列を用いて、2次元変換を定義します |
| translate(x,y) | X軸およびY軸に沿った要素を移動させる、2次元変換を定義します |
| translateX(n) | X軸に沿った要素を移動させる、2次元変換を定義します |
| translateY(n) | Y軸に沿った要素を移動させる、2次元変換を定義します |
| scale(x,y) | 幅と高さの要素を変更し、2Dスケール変換を定義します |
| scaleX(n) | 要素の幅を変更、2Dスケール変換を定義します |
| scaleY(n) | 要素の高さを変更、2Dスケール変換を定義します |
| rotate(angle) | 2D回転を定義し、角度をパラメータに指定されています |
| skew(x-angle,y-angle) | X軸およびY軸に沿って2次元スキュー変換を定義します |
| skewX(angle) | X軸に沿って2次元スキュー変換を定義します |
| skewY(angle) | Y軸に沿って2次元スキュー変換を定義します |