【CSS】トランスフォーム(transform)を使った要素の変形(3D)

      2016/08/15

2Dだけでなく、3Dの変形もできてしまうのがCSSの面白いところだと思っています。
3Dトランスフォームで、立体的な変形を試してみました。

3Dトランスフォームを使った変形

css3では、3D空間におけるトランスフォーム(変形)が可能。

使用するプロパティは2Dの時と同様にtransformプロパティを用いる。
そのプロパティに対して、3Dの変形を行う関数を指定する。

X、Y、Z、の各軸に対しての変形の他に、
X、Y、Z軸の値をまとめて指定するtranslate3d()のような関数も用意されている。

さらに、奥行きを指定するために、perspective関数も使用できる。

transformプロパティに指定可能な、移動、拡大縮小、回転に関する関数
関数 説明
translate3d(X, Y, Z) X軸、Y軸、Z軸の指定値分、平行移動する
translateX(X) X軸方向にのみ平行移動する
translateY(Y) Y軸方向にのみ平行移動する
translateZ(Z) Z軸方向にのみ平行移動する
scale3d(X,Y,Z) X軸、Y軸、Z軸方向に拡大縮小する
scaleX(X) X軸方向にのみ拡大縮小する
scaleY(Y) Y軸方向にのみ拡大縮小する
scaleZ(Z) Z軸方向にのみ拡大縮小する
rotate3d(X,Y,Z,角度) X、Y、Zが示す軸を中心に回転する
rotateX(X) X軸を中心にして回転する
rotateY(Y) Y軸を中心にして回転する
rotateZ(Z) Z軸を中心にして回転する
matrix3d 行列を指定することで変形させる
perspective(数値) 奥行きをpxで指定する
【変形を行う前のスタイル】

(CSS)
				#wrap1 {
					width: 300px;
					height: 100px;
					margin: 20px 0;
					background-color:rgba(255,0,0,0.1);
				}
				#box1  {
					width: 80px;
					height: 80px;
					background-size: cover;
					background-image: url(img_sample1.png);
				}
		
(HTML)
			<div id="wrap1">
				<div id="box1">box1</div>
			</div>
		
(実行結果)
box1

【使用例】translateZ()を使用して、box1をZ軸方向に移動させる。移動させる要素にperspective()を指定することで奥行きを指定する。

(CSS)
			#wrap1 {
				width: 300px;
				height: 100px;
				margin: 20px 0;
				background-color:rgba(255,0,0,0.1);
				transform-style: preserve-3d;
			}
			#box1  {
				width: 80px;
				height: 80px;
				background-size: cover;
				background-image: url(img_sample1.png);
				transform: perspective(5px) translateZ(-5px);
			}
		
(HTML)
			<div id="wrap1">
				<div id="box1">box1</div>
			</div>
		
(実行結果)
box1

【使用例】scaleX()を使用して、box1をX軸方向に縮小させる

(CSS)
				#wrap1 {
					width: 300px;
					height: 100px;
					margin: 20px 0;
					background-color:rgba(255,0,0,0.1);
					transform-style: preserve-3d;
				}
				#box1  {
					width: 80px;
					height: 80px;
					background-size: cover;
					background-image: url(img_sample1.png);
					transform: perspective(5px) scaleX(0.5);
				}
		
(HTML)
			<div id="wrap1">
				<div id="box1">box1</div>
			</div>
		
(実行結果)
box1

【使用例】rotateY()を使用して、box1をY軸を起点にして回転させる

(CSS)
				#wrap1 {
					width: 300px;
					height: 100px;
					margin: 20px 0;
					background-color:rgba(255,0,0,0.1);
					transform-style: preserve-3d;
				}
				#box1  {
					width: 80px;
					height: 80px;
					background-size: cover;
					background-image: url(img_sample1.png);
					transform: perspective(50px) rotateY(30deg);
				}
		
(HTML)
			<div id="wrap1">
				<div id="box1">box1</div>
			</div>
		
(実行結果)
box1

まとめ

3Dの変形に関するプロパティは結構ありますが、まずはtransformのプロパティに3d関数を使うところからやってみました。
その他のプロパティも、後日記事にしたいと思います。

 - css , , ,