CSS3 2D 変形

CSS3 変形

CSS3 の transform により、要素の移動（move）、拡大（scale）、中心点の周りを回転（turn）、 軸を中心に回転（spin）、伸縮（stretch）をすることができます。

どのように機能するか ?

変形とは、要素の形状、サイズ、位置を変更させる効果のことです。

要素は、2D または 3D transformation を使用して変形することができます。

ブラウザ・サポート

Internet Explorer 9 は、接頭辞 -ms- を必要とします。

Firefoxは、接頭辞 -moz- を必要とします。

Chrome 及び Safari は、接頭辞 -webkit- を必要とします。

Opera は、接頭辞 prefix -o- を必要とします。

2D 変形

この章では、2d 変形メソッドを学習します:

• translate()
• rotate()
• scale()
• skew()
• matrix()

次章で、3D transforms メソッドを学習します。

例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Try it yourself »

translate() メソッド

translate() メソッドにより、要素は、現在の位置から、左（X軸）と上（Y軸）の位置に 与えられたパラメータの位置へ移動します:

例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

Try it yourself »

値 translate(50px,100px) は、要素を左から 50ピクセル、上から 100ピクセルへ移動します。

rotate() メソッド

rotate() メソッドにより、指定の度数分、要素は時計回りに回転します。 負の値の指定が可能で、要素は反時計回りに回転します。

例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Try it yourself »

値 rotate(30deg) は、時計回りに30度回転します。

scale() メソッド

scale() メソッドによって、幅（X軸）と高さ（Y軸）で与えられたパラメータに応じて、 要素のサイズが大きくなったり、小さくなったりします:

例

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

Try it yourself »

値 scale(2,4) は、幅を元のサイズの2倍、高さを元のサイズの4倍に変形します。

skew() メソッド

skew() メソッドによって、水平線（X軸）と垂直線（Y軸）に指定したパラメータに応じて、 要素は与えられた角度分回転します:

例

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

Try it yourself »

値 skew(30deg,20deg) は、X軸まわりに30度、Y軸まわりに20度、要素を回転します。

matrix() メソッド

matrix() メソッドは、全ての 2D transform メソッドを1つに統合します。

matrix() メソッドは、 要素の回転、伸縮、移動（translate）、傾斜を可能にする、 数学的な関数に含まれる6つのパラメータを取ります。

例

matrix メソッドを用い、div 要素を30度回転する方法:

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Try it yourself »

新 Transform プロパティ

次の表は、全 transform プロパティの一覧です:

2D Transform メソッド