【CSS】「perspective」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「perspective」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「perspective」プロパティを使うと「ユーザー」から「z = 0 平面」までの「距離」の指定をすることができます。

また、下の動画でもCSSの「perspective」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「perspective」プロパティを使うと何ができるのか？

<p>perspective: 100px;</p>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <p>perspective: 800px;</p>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

.container {
    width: 1000px;
    margin: 30px auto;
    display: flex;
    overflow-x: scroll;
    perspective: 100px;
}
.container:nth-of-type(2) {
    margin-top: 20px;
    perspective: 800px;
}
.box {
    width: 200px;
    height: 250px;
    background-color: skyblue;
    margin-right: 20px;
    rotate: y 90deg;
    flex-shrink: 0;
    translate: 0 0 -100px;
}

p {
    width: 1000px;
    margin: 20px auto;
    font-size: 30px;
}

「perspective」プロパティを使うと「ユーザー」から「z = 0 平面」までの「距離」の指定をすることができます。

要素を立体的に配置したときに「要素とユーザーとの距離」とか「奥行」といいう概念がでてきますよね。

そこで、ユーザーがどの距離から要素を見ているのかという「視点」の設定をしないと、立体的に見えなくなります。

その「視点」の設定ができるのがCSSの「perspective」プロパティになります。

なるほど！

「perspective」プロパティの使い方！

それでは「perspective」プロパティの使い方をまとめていきますね！

「perspective」に設定できる値は？

「perspective」に設定できる値は下記があります。

• 「none」キーワード (初期値)
• 「距離」の指定 (pxなどを使う)

これらがあります。

「none」を使うと？（初期値）

「none」を使うと、「ユーザーとｚ=0平面の距離」が「考慮されない」という指定になります。

なので「立体的に見えない」というような現象が起きますね。

この「none」が初期値です。

「距離」の指定 (pxなどを使う)

「px」などの単位を使うことで、「ユーザー」から「z=0平面」までの「距離」の指定をすることができます。

「px」の他にもCSSで使うことができる単位を使って自由に距離の指定ができますね。

要素を「translate」で「z軸方向」に動かす際に「perspective」が必要！

<p>perspective: none;</p>
<div class="container">
    <div class="box"></div>
</div>

<p>perspective: 600px;</p>
<div class="container">
    <div class="box"></div>
</div>

要素を「translate」で「z軸方向」に動かす際には、「動かす要素」の親要素に「perspective」の指定が必要になります。

「perspective」を使って、視点の指定をしてないと、要素を「z軸方向」に動かしたときに「画面上でどのくらい動いて見えるのか」が不明瞭になってしまうので、上の動画のように「:hover」を使って「z軸方向」に要素を動かしたとしても、「動いて見えない」という現象が起きてしまいます。

「perspective」の値が初期値の「none」のままだと「立体的に要素が見えない」ので、その辺の挙動の理解と、注意が必要ですね。

参考リンク！

仕様書。
https://drafts.csswg.org/css-transforms-2/#perspective-property

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/perspective

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「perspective」プロパティを使うと「ユーザー」から「z = 0 平面」までの「距離」の指定をすることができる。

「perspective」に設定できる値は下記がある。

• 「none」キーワード (初期値)
• 「距離」の指定 (pxなどを使う)

「none」を使うと、「ユーザーとｚ=0平面の距離」が「考慮されない」という指定になる。

「px」などの単位を使うことで、「ユーザー」から「z=0平面」までの「距離」の指定をすることができる。

要素を「translate」で「z軸方向」に動かす際に「perspective」が必要！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「perspective」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！