【CSS】perspectiveプロパティと、transform:perspective関数の違い

      2016/08/15


3Dの変形を行う場合は、X、Y軸に加えて、Z軸が存在するので、奥行(パース)を設定できます。

その奥行の指定には
・親要素に対してperspectiveプロパティを使用する
・子要素に対してtransform:perspective関数を使用する

の2つの方法があります。

それぞれの方法を試してみました。

perspectiveプロパティを使用

【使用例】
回転アニメーションを行う。
奥行の設定方法は、回転させたい要素の親要素に対してperspectiveプロパティを使用する。

(CSS)
				.wrap {
					background-color:rgba(255,0,0,0.1);
					height: 100px;
					transform-style: preserve-3d;
					perspective: 30px;
				}
				#box1  {
					width: 80px;
					height: 80px;
					background-size: contain;
					background-image: url(img_sample1.png);
					transition: 1s;
				}
				.wrap:hover #box1{ transform:rotateX(180deg); }
			
(HTML)
				<div class="wrap">
					<div id="box1">box1</div>
				</div>
			
(実行結果)

ホバーするとアニメーションします。

box1

transform:perspective関数を使用

【使用例】
回転アニメーションを行う。
奥行の設定方法は、回転させる要素に対してtransform:perspective関数で指定する。

(CSS)
				.wrap {
					background-color:rgba(255,0,0,0.1);
					height: 100px;
					transform-style: preserve-3d;
				}
				#box1  {
					width: 80px;
					height: 80px;
					background-size: contain;
					background-image: url(img_sample1.png);
					transition: 1s;
					transform: perspective(30px);
				}
				.wrap:hover #box1{ transform: perspective(30px) rotateX(180deg); }
			
(HTML)
				<div class="wrap">
					<div id="box1">box1</div>
				</div>
			
(実行結果)

ホバーするとアニメーションします。

box1

まとめ

(2016.6.29現在)
親要素に対してperspectiveを使用したケースでは、rotateXでのX軸回転が意図どおりにはいきませんでした。
transform:perspective関数のような回転を期待していたのですが、残念ながら、そうなりませんでした。
transform-originの値を設定しても、ダメでした。

現状は、rotateXを使用する場合、transform:perspective関数を使用しておけば問題ないと思っています。

 - css , , , , , , ,