CSSプロパティperspectiveとは?!書き方を解説

2020年11月2日

CSSアニメーションとかで使う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>

2つの比較

ハバーアニメーションにするとより違いが分かりやすいと思います

ベンダープレフィックスあり

ベンダープレフィックスなし

かわいくて楽しいですね😄

perspectiveを使って作ったボタン

See the Pen Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan) on CodePen.

この中にも、perspectiveを使って作られたものもあります。

こんな感じで、perspectiveを指定すると立体感を出すことができます!

CSS表現の幅が広がるので是非知っておきたいところですね!

スポンサーリンク