perspective-origin

このエントリーをはてなブックマークに追加

perspective-originプロパティはperspectiveプロパティの3D変形時の奥行きの位置を指定できるプロパティです。

最初の値にX軸の次の値にY軸の位置が指定でき、初期値は50% 50%で要素の中央になりますが、これを任意の位置に変更できます。

#div1 {
	width:100px;
	height:100px;
	-webkit-perspective:200;
	perspective:200;
	margin-bottom:100px;
}
#div1 div{
	width:100px;
	height:100px;
	background:red;
	-webkit-transform:rotateX(30deg);
	-ms-transform:rotateX(30deg);
	transform:rotateX(30deg);
}

sample

値には%やem、pxといった値の他にtop、right、bottom、left、centerといったキワードが指定できます。

対応ブラウザ

IE Chrome 29 Safari Firefox 23 iOS Android
◯ 10〜 △ 5.1〜 △ 3.2〜 △ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

11 The perspective-origin Property - W3C

登録日 : 2013年12月14日 最終更新日 : 2013年12月14日

同じカテゴリー(Transform)のエントリー

検索

スポンサードリンク

バージョン

リファレンス