CSS3基本チュートリアル

CSS3 3D 変換 CSS3 影(Shadows)

CSS3 2D 変換

CSS3 2D変換機能は、2D空間内の変換された要素

要素の2D変換

CSSを使用して3 2D変換機能では、2次元空間の要素に対して基本的な変換操作（移動、回転、拡大、倾斜など）を実行できます。

変換された要素は周囲の要素に影響を与えませんが、絶対位置の要素のように重ね合わせできます。ただし、変換された要素はデフォルト位置（変換されていない）では、レイアウト内でスペースを占めます。

CSS変換と変換機能を使用して

CSS3 transform属性は、変換機能を使用して要素の使用する座標系を操作し、変換効果を適用します。

以下の部分では、これらの変換関数について説明します：

translate()機能

要素を現在位置から新しい位置にXおよびY軸に移動します。translate(tx, ty)と書けます。tyが指定されていない場合、デフォルトで0とします。

例

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

テストを見て‹/›

translate(200px, 50px)この機能は、画像をx軸正方向に水平に移動します200ピクセル、y軸垂直方向に移動します50ピクセル。

rotate()関数

rotate()関数は要素を原点（transform-origin属性で指定）指定された角度で回転します。rotate(a)として書ける。

例

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

テストを見て‹/›

rotate(30deg)この機能は画像をその原点周りに時計回りに回転30度。負の値を使用して反時計回りに回転することもできます。

scale()関数

scale()関数は要素の大きさを増加または減少させます。scale(sx, sy)として書ける。syが指定されていない場合、sxと同じ値と仮定されます。

例

img　{
　　　　-webkit-transform:　scale(1.5);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　scale(1.5);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　scale(1.5);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　scale(1.5);　　/*　Modern　Browsers　*/　　　　
}

テストを見て‹/›

scale(1.5)関数は画像の幅と高さを元のサイズの1.5倍。関数scale(1)またはscale(1、1)要素に影響を与えません。

skew()機能

skew()関数は要素をXおよびY軸に指定された角度でスキューします。skew(ax, ay)として書ける。ayが指定されていない場合、その値は0と仮定されます。

例

img　{
　　　　-webkit-transform:　skew(-40deg,　15deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　skew(-40deg,　15deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　skew(-40deg,　15deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　skew(-40deg,　15deg);　　/*　Modern　Browsers　*/　　　　
}

テストを見て‹/›

この関数skew(-40deg, 15deg)で要素をx軸に水平にスキュー-40度でy軸を垂直にスキュー15度。

matrix()機能

matrix()機能2D変換、例えば平移、回転、スケール、およびスキューを表現する方法について説明します。これはmatrix()機能を一度に実行できます。行列の形式の六つのパラメータは、matrix(a, b, c, d, e, f)として書ける。次の章では、各2D変換関数matrix()。

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—そのうちtxとtyは水平および垂直の平移値。
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—そのうち、aは度数。sin(a)とcos(a)を交換することもできます。-sin(a)値で反転回転。最大の回転角度は360度。
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);—そのうちsxとsyは水平および垂直のスケール比値。
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);—そのうちaxとayはdeg単位の水平および垂直値。

これはmatrix()機能を使用して2D変換の例。

例

img　{
　　　　-webkit-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　matrix(0,　-1,　1,　0,　200px,　50px);　　
}

テストを見て‹/›

しかし、一度に複数の変換を実行する場合、単一の変換関数を使用し、それらを順序に並べる方が便利です。以下のように表示されます：

例

img　{
　　　　-webkit-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px)　rotate(180deg)　scale(1.5)　skew(0,　30deg);　　　　　　
}

テストを見て‹/›

2D 変換機能を簡単に概説しています

以下の表は、すべての2D 変換機能

機能	説明
translate(tx,ty)	要素をXとY軸に沿って指定された量を移動します。
translateX(tx)	要素をX軸に沿って指定された量を移動します。
translateY(ty)	要素をY軸に沿って指定された量を移動します。
rotate(a)	transform-origin属性で指定された角度に基づいて、指定された角度で要素の原点を中心に回転させます。
scale(sx,sy)	指定された数で要素の幅と高さを上または下に拡縮します。この機能 scale(1,1) 無効。
scaleX(sx)	指定された数で要素の幅を上または下に拡縮します。
scaleY(sy)	指定された数で要素の高さを上または下に拡縮します。
skew(ax,ay)	要素をXとY軸に沿って指定された角度で傾斜させます。
skewX(ax)	要素をX軸に沿って指定された角度で傾斜させます。
skewY(ay)	要素をY軸に沿って指定された角度で傾斜させます。
matrix(n,n,n,n,n,n)	6つの値を持つ変換マトリックスの形式で指定します2D 変換。

CSS3 3D 変換 CSS3 影(Shadows)