CSSリファレンス

Tweet

perspective()はtransformプロパティによる自由変形時の起点となる奥行きを指定できます。

transformプロパティによる自由変形ではデフォルトの奥行きつまり画面上を起点に変形を行ないますが、perspective()に任意の数値を指定することで、起点となる奥行きを設定できます。

perspective()の指定後に任意のtransformを指定しなければなりません。

.target{
	transform:perspective(300) rotateX(30deg);
}

perspective()が利用できるtransformプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

.target{
	-webkit-transform:perspective(300) rotateX(30deg);
	-ms-transform:perspective(300) rotateX(30deg);
	transform:perspective(300) rotateX(30deg);
}

sample

サンプルではtransitionを利用しrotateX()の変化を確認できるが、アニメーション中はperspective()の指定は無視されアニメーション終了後にperspective()の値が反映されます。

同様の指定はperspectiveプロパティを利用することでも可能です。

対応ブラウザ

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

参考URL

15. The Transform Functions - perspective - W3C

登録日 : 2013年10月15日 最終更新日 : 2013年11月13日

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

• backface-visibility
• perspective-origin
• perspective
• transform-style
• transform-origin
• matrix3d()
• matrix()
• perspective()
• skewY()
• skewX()
• skew()
• rotate3d()
• rotateZ()
• rotateY()
• rotateX()
• rotate()
• scale3d()
• scaleZ()
• scaleY()
• scaleX()
• scale()
• translateZ()
• translate3d()
• translateY()
• translateX()
• translate()
• transform