CSSプロパティperspectiveとは？！書き方を解説

2020年7月29日2020年11月2日

CSSアニメーションとかで使うperspectiveって何?!

そんな疑問に答えます。

Contents

1. CSSのperspectiveとは
2. perspectiveの記述の仕方
3. perspectiveを使って作ったボタン

CSSのperspectiveとは

一言でいうと、奥行きを与えるプロパティです。

見た方が分かりやすいと思うので、例をあげますね。

See the Pen Perspective Sample by Yuhomyan (@yuhomyan) on CodePen.

鹿をハバーしてみてください。

こんな感じで、要素にtransformを適用するとき、奥行き（Z軸）を与えることができます。

奥行きの深さは数字、もしくは具体的なpxで指定することが可能です。

perspective:500;　みたいな感じです💡

perspectiveの記述の仕方

こんな感じで記述します。

perspectiveを指定した場合

<style>
p.prefix {
perspective:500;
-moz-perspective:500;
-webkit-perspective:500;
-o-perspective:500;
-ms-perspective:500;
}
p.prefix img{
width: 150px;
height: 100px;
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
</style>
<p class="prefix"><br>
<img src="https://images.unsplash.com/photo-1487300001871-12053913095d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"　width="150px" height="100px" border="0">
</p>

perspectiveを指定しない場合

<style>

p.prefix img{
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
</style>
<p class="prefix">
<br>
<img src="https://images.unsplash.com/photo-1487300001871-12053913095d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"　width="150px" height="100px" border="0">
</p>