要素に3次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに２次元、３次元の変形効果を適用できます。３次元変形では横(Ｘ軸)、縦(Ｙ軸)、ブラウザ画面に垂直(Ｚ軸)の方向に関して、移動、拡大・縮小、回転の変形効果を適用し、遠近法(透視図法)で表現できます。変形の種類は下記の関数を利用します。

変化効果	変形関数
移動	translate3d() translateZ()
拡大・縮小	scale3d() scaleZ()
回転	rotate3d() rotateX() rotateY() rotateZ()
透視図法	perspective()
変形行列	matrix

変形関数の指定方法

none:
　変形効果の適用なし

translate3d(Ｘ軸方向の距離,Ｙ軸方向の距離,Ｚ軸方向の距離):
　要素を移動させる。Ｘ軸方向とＹ軸方向の移動距離を、それぞれ「実数値＋単位」か「パーセント値＋％」で、Ｚ軸方向の移動距離を「実数値＋単位(%は不可)」で指定する。Ｚの値が大きくなるほど要素が手前の位置になります。

translateZ(Ｚ軸方向の距離):
　要素をＺ軸方向へ移動させる。移動距離は「実数値＋単位(%は不可)」。Ｚの値が大きくなるほど要素が手前の位置になります。

scale3d(Ｘ軸方向の倍率,Ｙ軸方向の倍率,Ｚ軸方向の倍率):
　要素を拡大・縮小させます。Ｘ軸方向とＹ軸方向、Ｚ軸方向に拡大・縮小させる倍率を、それぞれ標準サイズを１とした単位なしの実数値で指定します。
scaleZ(Ｚ軸方向の倍率):
　要素をＺ軸方向へ拡大・縮小させます。拡大・縮小させる倍率を、標準サイズを１とした単位なしの実数値で指定する。

rotate3d(x,y,z,回転角度):
　変形の基点と最初の３つの値で指定された方向ベクトル(x,y,z)を結ぶ直線を軸として、要素を時計回りに回転させる。最後の阿多に回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する。

rotateX(Ｘ軸周りの角度):
　要素を回転させる。Ｘ軸を回転軸として回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する。rotate3d(1,0,0,Ｘ軸回りの角度)を指定したときと同じです。

rotateY(Ｙ軸周りの角度):
　要素を回転させる。Ｙ軸を回転軸として回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する。rotate3d(0,1,0,Ｙ軸回りの角度)を指定したときと同じです。

rotateZ(Ｚ軸周りの角度):
　要素を回転させる。Ｚ軸を回転軸として回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する。rotate3d(0,0,1,Ｚ軸回りの角度)を指定したときと同じで、動作は２次元の変形時に登用した、rotate()と同じです。

perspective(視点の距離):
　要素を「透視図法」というもので表示する。変形の効果は普通、Ｚ軸に平行な視点で描く「投影図法」でブラウザに表示されるので、奥行のある表現にはなりません。perspective()関数で視点を指定すると、奥行きがあるように表現できます。値には、Z=0の面、ブラウザ画面から視点までの距離を、0以上の数値に単位をつけて指定します。値が大きいほど、要素が小さく、遠くに見えるようになります。それと要素の位置によっても見え方は変わります。

matrix(a,b,c,d,e,f):
　４＊４の変換行列を利用して座標を変換して、要素を変形させます。

各変形効果を半角スペースで区切って書けば、複数の効果を適用できます。そのときは、先に指定したものから適用されます。指定する順番により効果が変わることがあります。

それと、変形の基点はボックスの中心(50%､50%､0)ですが、後述するtransform-originプロパティで変更することができます。

３次元変形の基点を変更する

３次元の変形効果は、ボックスの中心(50%,50%,0)を基点して適用されますが、transform-originプロパティを利用すると、この位置を変更できます。

ボックスの左上を(0,0,0)としたときの基点の位置を、Ｘ軸、Ｙ軸、Ｚ軸方向の座標又はキーワードで半角スペースで区切って指定します。Ｚ軸を示す３つの値は実数値＋単位でのみ指定できます。１つまたは２つの値のみ指定したときは、３つ目の値は０が指定されたものとして扱われます。

値の指定方法
・パーセント値＋％
　要素ボックスのサイズに対する割合で、基点の位置を調整
・実数値＋単位
　数値に単位をつけて、貴店の位置を指定する
・キーワード　top,bottom,left,right,center
　Ｘ軸方向の位置(left,center,right)とＹ軸方向の位置(top,center,bottom)を指定する。top,left「0%」,rightとbottomは「100%」centerは「50%」を指定したときと同じです。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>３次元の変形効果のテスト</title>
	<style>
	body{margin-left:128px;}
	.box{
		width:200px;
		height:200px;
		font-family:"メイリオ","sans-serif";
		position:absolute;
	}
	.colorWhite{color:white;}
	.fontSize16{font-size:16px;}
	.bgGreen{background-color:green;}

	.trans{
		background-color:gold;
		-webkit-transform:perspective(400px) translateZ(40px) rotateX(50deg);
				transform:perspective(400px) translateZ(40px) rotateX(50deg);
	}

	</style>
</head>
<body>
	<div class="box bgGreen">sample box</div>
	<div class="box colorWhite fontSize16 trans">３次元変形テスト</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>３次元の変形効果のテスト</title>

<style>

body{margin-left:128px;}

.box{

width:200px;

height:200px;

font-family:"メイリオ","sans-serif";

position:absolute;

}

.colorWhite{color:white;}

.fontSize16{font-size:16px;}

.bgGreen{background-color:green;}

.trans{

background-color:gold;

-webkit-transform:perspective(400px) translateZ(40px) rotateX(50deg);

transform:perspective(400px) translateZ(40px) rotateX(50deg);

}

</style>

</head>

<body>

<div class="box bgGreen">sample box</div>

<div class="box colorWhite fontSize16 trans">３次元変形テスト</div>

</body>

</html>