ユーザーID パスワード

技術情報

  • FAQ　よくある質問
  • 個人ユーザー向けサービスのお手続きについて

コード&コラム Web編 〜実践！HTML5〜

第3章 Photo Gallery (2/4)

前へ 1 |2 |3 |4 次へ

トランスフォーメーション

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 */
}

例）赤色をｘ軸方向に50px移動した場合（青色は元の位置）
image001

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 */
}

例）赤色をｙ軸方向に50px移動した場合（青色は元の位置）
image002


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 */
}

例）赤色をｘ軸、ｙ軸方向に50px移動した場合（青色は元の位置）
image003


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 */
}

例）赤色を60度時計回りに傾けた場合（青色は元の位置）
image004


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 */
}

例）赤色の横幅を2倍にした場合（青色は元の大きさ）
image005

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 */
}

例）赤色の縦幅を2倍にした場合（青色は元の大きさ）
image006


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 */
}

例）赤色の横幅、縦幅を半分にした場合（青色は元の大きさ）
image007


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 */
}

例）赤色をｘ軸周りに60度回転した場合（青色は元の大きさ）
image008


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 */
}

例）赤色をｙ軸周りに60度回転した場合（青色は元の大きさ）
image009


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 */
}

例）赤色をｘ軸ｙ軸周りに30度回転した場合（青色は元の大きさ）
image010


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 */
}

例）赤色をｘ軸ｙ軸方向に30px移動した場合（青色は元の位置）
image011


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 */
}

例）赤色をz軸方向に50px移動した場合（青色は元の位置）
image012


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 */
}

例）赤色をｘ軸ｙ軸z軸方向に50px移動した場合（青色は元の位置）
image013

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 */
}

例）赤色ｙ軸、z軸方向に60度時計回りに回転した場合（青色は元の位置）
image014


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 */
}

例）赤色をx=1,y=0,z=0のベクトルでz軸方向に60度時計回りに回転した場合
（青色は元の位置）
image015


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 */
}

例）赤色をｙ軸方向に60度時計回りの回転を加え、奥行を5倍にした場合
（青色は元の大きさ）
image016

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 */
}

例）赤色のｙ軸方向に60度時計回りの回転を加え、横幅、縦幅、奥行きを2倍にした場合
（青色は元の大きさ）
image017


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 */
}

例）赤色のｙ軸方向に60度時計回りの回転を加え、
ｘ軸に50px、y軸に100px、ｚ軸に20px移動した場合（青色は元の位置）
image018

前へ 1 |2 |3 |4 次へ

トップへ戻る

実践！HTML5 記事一覧

第1章 Audio/Video

第2章 Canvas

第3章 Photo Gallery

第4章 神経衰弱ゲーム

>>実践！HTML5 TOPへ

サンプルコード

第1章
Audio/Video

第2章
Canvas

第3章
Photo Gallery

第4章
神経衰弱ゲーム

ソフトバンク株式会社

Copyright SoftBank Corp. All rights reserved.