CSS3では新たにtransformプロパティ、transform-originプロパティの2つのプロパティが追加されています。
transformプロパティのtransformメソッドを利用することで要素に対して2D、3D的に移動、拡大、回転、伸縮といった変形を加える事ができるようになりました。
また、transform-originプロパティでは要素に2D、もしくは3Dの変形を適用する際の変形の原点を指定します。
現時点ではtransformプロパティ、transform-originプロパティともにどのブラウザも対応していませんが、各ブラウザのベンダープレフィックスを追記することで対応可能となっています。
以下はtransformプロパティに用意されている2D変形メソッドの一覧とその記述方法となります。
translateX(n) - 要素のX軸移動
/* test1クラスのdiv要素をX軸に沿って50px移動する */ div.test1{ -ms-transform: translateX(50px); /* IE 9 */ -webkit-transform: translateX(50px); /* Safari and Chrome */ -o-transform: translateX(50px); /* Opera */ -moz-transform: translateX(50px); /* Firefox */ }
translateY(n) - 要素のY軸移動
/* test2クラスのdiv要素をY軸に沿って50px移動する */ div.test2{ -ms-transform: translateY(50px); /* IE 9 */ -webkit-transform: translateY(50px); /* Safari and Chrome */ -o-transform: translateY(50px); /* Opera */ -moz-transform: translateY(50px); /* Firefox */ }
translate (x,y) - 要素のX軸、Y軸移動
/* test3クラスのdiv要素をX軸に50px、Y軸に50px移動する */ div.test3{ -ms-transform: translate(50px,50px); /* IE 9 */ -webkit-transform: translate(50px,50px); /* Safari and Chrome */ -o-transform: translate(50px,50px); /* Opera */ -moz-transform: translate(50px,50px); /* Firefox */ }
rotate (deg) - 要素の角度変更
/*test4クラスのdiv要素を60度時計周りに傾ける*/ div.test4{ -ms-transform: rotate(60deg); /* IE 9 */ -webkit-transform: rotate(60deg); /* Safari and Chrome */ -o-transform: rotate(60deg); /* Opera */ -moz-transform: rotate(60deg); /* Firefox */ }
scaleX (n) - 要素の横幅の変更
/*test5クラスのdiv要素の横幅を2倍にする*/ div.test5{ -ms-transform: scaleX(2); /* IE 9 */ -webkit-transform: scaleX(2); /* Safari and Chrome */ -o-transform: scaleX(2); /* Opera */ -moz-transform: scaleX(2); /* Firefox */ }
scaleY (n) - 要素の縦幅の変更
/*test6クラスのdiv要素の縦幅を2倍にする*/ div.test6{ -ms-transform: scaleY(2); /* IE 9 */ -webkit-transform: scaleY(2); /* Safari and Chrome */ -o-transform: scaleY(2); /* Opera */ -moz-transform: scaleY(2); /* Firefox */ }
scale (x,y) - 要素の横幅、縦幅の変更
/*test7クラスのdiv要素の横幅、縦幅を二分の一にする*/ div.test7{ -ms-transform: scale(0.5,0.5); /* IE 9 */ -webkit-transform: scale(0.5,0.5); /* Safari and Chrome */ -o-transform: scale(0.5,0.5); /* Opera */ -moz-transform: scale(0.5,0.5); /* Firefox */ }
skewX (n) - 要素のX軸回転
/*test8クラスのdiv要素をX軸周りに60度回転する*/ div.test8{ -ms-transform: skewX(60deg); /* IE 9 */ -webkit-transform: skewX(60deg); /* Safari and Chrome */ -o-transform: skewX(60deg); /* Opera */ -moz-transform: skewX(60deg); /* Firefox */ }
skewY (n) - 要素のY軸回転
/*test9クラスのdiv要素をY軸周りに60度回転する*/ div.test9{ -ms-transform: skewY(60deg); /* IE 9 */ -webkit-transform: skewY(60deg); /* Safari and Chrome */ -o-transform: skewY(60deg); /* Opera */ -moz-transform: skewY(60deg); /* Firefox */ }
skew (x,y) - 要素のX軸、Y軸回転
/*test10クラスのdiv要素をX軸周りに30度、Y軸周りに30度回転する*/ div.test10{ -ms-transform: skew(30deg,30deg); /* IE 9 */ -webkit-transform: skew(30deg,30deg); /* Safari and Chrome */ -o-transform: skew(30deg,30deg); /* Opera */ -moz-transform: skew(30deg,30deg); /* Firefox */ }
matrix (n,n,n,n,n,n) - マトリクス指定による要素の変形
/*test11クラスのdiv要素をX軸に50px、Y軸に100px移動する*/ div.test11{ -ms-transform: matrix(1,0,0,1,50,100); /* IE 9 */ -webkit-transform: matrix(1,0,0,1,50,100); /* Safari and Chrome */ -o-transform: matrix(1,0,0,1,50,100); /* Opera */ -moz-transform: matrix(1,0,0,1,50,100); /* Firefox */ }
3D変形のメソッドも同じくtransformプロパティに用意されており、2D変形に加え、奥行き方向(Z方向)の指定が可能となっており、translateメソッド、rotateメソッド、scaleメソッドのそれぞれに対しZ軸方向に対する指定が行えます。
以下が3D変形メソッドの一覧と記述例となります。
translateZ(n) - 要素のZ軸移動
/* test12クラスのdiv要素をZ軸に沿って50px移動する */ div.test12{ -ms-transform: translateZ(50px); /* IE 9 */ -webkit-transform: translateZ(50px); /* Safari and Chrome */ -o-transform: translateZ(50px); /* Opera */ -moz-transform: translateZ(50px); /* Firefox */ }
translate3d(x,y,z) - 要素のX,Y,Z軸移動
/* test13クラスのdiv要素をX軸、Y軸、Z軸にそれぞれに50px移動する */ div.test13{ -ms-transform: translate3d(50px,50px,50px); /* IE 9 */ -webkit-transform: translate3d(50px,50px,50px); /* Safari and Chrome */ -o-transform: translate3d(50px,50px,50px); /* Opera */ -moz-transform: translate3d(50px,50px,50px); /* Firefox */ }
rotateZ(deg) - 要素のZ軸を軸とした角度変更
/* test14クラスのdiv要素をZ軸を軸として時計周りに60度傾ける */ div.test14{ -ms-transform: rotateZ(60deg); /* IE 9 */ -webkit-transform: rotateZ(60deg); /* Safari and Chrome */ -o-transform: rotateZ(60deg); /* Opera */ -moz-transform: rotateZ(60deg); /* Firefox */ }
rotate3d - 指定した方向ベクトルによるZ軸を軸とした要素の角度変更
/* test15クラスのdiv要素をx=1,y=0,z=0のベクトルでZ軸を軸として時計周りに60度傾ける */ div.test15{ -ms-transform: rotate3d(1,0,0,60deg); /* IE 9 */ -webkit-transform: rotate3d(1,0,0,60deg); /* Safari and Chrome */ -o-transform: rotate3d(1,0,0,60deg); /* Opera */ -moz-transform: rotate3d(1,0,0,60deg); /* Firefox */ }
scaleZ - 要素の奥行きの変更
/* test16クラスのdiv要素の奥行きを二分の一にする */ div.test16{ -ms-transform: scaleZ(0.5); /* IE 9 */ -webkit-transform: scaleZ(0.5); /* Safari and Chrome */ -o-transform: scaleZ(0.5); /* Opera */ -moz-transform: scaleZ(0.5); /* Firefox */ }
scale3d - 要素の縦幅、横幅、奥行きの変更
/* test17クラスのdiv要素の縦幅、横幅、奥行きを2倍にする */ div.test17{ -ms-transform: scale3d(2,2,2); /* IE 9 */ -webkit-transform: scale3d(2,2,2); /* Safari and Chrome */ -o-transform: scale3d(2,2,2); /* Opera */ -moz-transform: scale3d(2,2,2); /* Firefox */ }
matrix3d - 3dマトリクス指定による要素の変形
/*test18クラスのdiv要素をX軸に50px,Y軸に100px,Z軸に20px移動する*/ div.test18{ -ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0,0, 0, 1, 0,50, 100, 20, 1); /* IE 9 */ -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0,0, 0, 1, 0,50, 100, 20, 1); /* Safari and Chrome */ -o-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0,0, 0, 1, 0,50, 100, 20, 1); /* Opera */ -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0,0, 0, 1, 0,50, 100, 20, 1); /* Firefox */ }