子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパティです。perspective関数に似て言いますが、perspective()関数がその要素自体に適用されるのに対して、perspectiveプロパティはこのプロパティが指定された要素の子要素にのみ有効です。

perspectiveプロパティ
設定値	説明
none	視点の距離を変更しない。子要素は投影図法で表現される
実数値+t単位	Z=0の面、ということはブラウザ画面から視点までの距離を、０以上の数値に単位をつけて指定する。視点を変化させることで、奥行があるように表現できる。値が大きいほど要素が小さく、遠くにあるように見えます。

子要素を透視図法の視点を変更する

子要素の透視図法のＸ軸、Ｙ軸の方向は、perspectiveプロパティで指定された要素のボックスの中心(50%,50%)が基点となりますが、perspective-originプロパティを指定すれば、この位置を変更することができます。ボックスの左上を「0,0」としたときの基点の位置を、Ｘ軸、Ｙ軸方向の座標又は、キーワードを半角スペースで区切って指定します。値を１つだけ指定したときは、２つの値に「center」を指定したものとみなされます。

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

要素の裏面の表示方法を指定する

Ｘ軸、Ｙ軸を中心とした回転のように、変形効果によっては要素の裏面に当たる部分がユーザー側に現れることがあります。backface-visibilityプロパティは、こういうときに裏面を表示するかどうかを指定するプロパティです。

backface-visibilityプロパティ
設定値	説明
visible	初期値。裏面が表示されるようにする。
hidden	裏面が表示されないようにする。

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

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>要素の裏面の表示方法を指定してみる</title>

	<style>
	body{
		margin-top:30px;
		margin-left:30px;
	}
	div{
		width:200px;
		height:80px;
	}
	.boder2pxSolid{border:solid 2px black;}
	.backfaceVisi{-webkit-backface-visibility:visible;}
	.backfaceHid {-webkit-backface-visibility:hidden;}

	.posiAbs{position:absolute;}
	.top200px{top:200px;}
	.left300px{left:300px;}

	.transRotateY180deg{-webkit-transform:rotateY(180deg);}
	.transRotateY45deg {-webkit-transform:rotateY(45deg);}

	.pers{
		-webkit-perspective:400px;
		-webkit-perspective-origin:center 0;
	}

	.bgOrange{background-color:orange;}
	.bgSilver{background-color:silver;}
	.bgSkyblue{background-color:skyblue;}

	</style>

</head>
<body>
	<p>* backface-visibility:hiddenを指定してるので
		右ボックスでは裏面は表示されない
	</p>
	<div class="posiAbs boder2pxSolid">
		<div class="bgOrange backfaceVisi transRotateY180deg">
			backface-visibility:visible
		</div>
	</div>

	<div class="posiAbs left300px boder2pxSolid">
		<div class="bgSilver backfaceHid transRotateY180deg">
			backface-visibility:hidden
		</div>
	</div>


	<div class="posiAbs top200px boder2pxSolid pers">
		<div class="bgSkyblue transRotateY45deg">
			perspective:400px;と
			perspective-orign:center 0;を指定
		</div>
	</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>要素の裏面の表示方法を指定してみる</title>

<style>

body{

margin-top:30px;

margin-left:30px;

}

div{

width:200px;

height:80px;

}

.boder2pxSolid{border:solid 2px black;}

.backfaceVisi{-webkit-backface-visibility:visible;}

.backfaceHid {-webkit-backface-visibility:hidden;}

.posiAbs{position:absolute;}

.top200px{top:200px;}

.left300px{left:300px;}

.transRotateY180deg{-webkit-transform:rotateY(180deg);}

.transRotateY45deg {-webkit-transform:rotateY(45deg);}

.pers{

-webkit-perspective:400px;

-webkit-perspective-origin:center 0;

}

.bgOrange{background-color:orange;}

.bgSilver{background-color:silver;}

.bgSkyblue{background-color:skyblue;}

</style>

</head>

<body>

<p>* backface-visibility:hiddenを指定してるので

右ボックスでは裏面は表示されない

</p>

backface-visibility:visible

</div>

backface-visibility:hidden

</div>

perspective:400px;と

perspective-orign:center 0;を指定

</div>

</body>

</html>