perspectiveプロパティの説明
CSSのperspectiveプロパティは、三次元的に配置された要素の遠近感を指定します。この機能は、transform関連のプロパティで変形を行った要素の親要素に指定することで有効となります。
perspectiveに指定できる値
none- 立体的な座標変換を一切行いません。これが初期値です。
<length>- CSSで使用できる距離を示す単位付きの値です。子要素に対するZ軸の奥行きを表します。
perspectiveの使い方とサンプルコード
perspectiveプロパティの構文は以下の通りです。
/* キーワード値 */
perspective: none;
/* <length>値 */
perspective: 30px;
perspective: 2.4rem;
/* グローバル値 */
perspective: inherit;
perspective: initial;
perspecive: revert;
perspective: unset;
perspectiveの実例
それでは実際にperspectiveプロパティの書き方を見ていきましょう。以下の例は、transformプロパティによて変形させた子要素に対して、perspectiveの効果を適用する前と後の比較です。
変形を二次元で表現すると平面的に見えますが、Z軸方向の奥行きにパースをつけると立体的に見えます。perspectiveの値が大きいほど、視点は遠ざかり要素は平面に近づきます。逆に数値を小さくすると、視点が近づき要素の立体感は強調されます。
<section class="samp_box">
<div class="trsf_1">
<h2>perspective: none;</h2>
<p>transform: rotateY(40deg);</p>
</div>
<div class="trsf_1 pers">
<h2>perspective: 300px;</h2>
<p>transform: rotateY(40deg);</p>
</div>
<div class="trsf_2">
<h2>perspective: none;</h2>
<p>transform: rotateX(40deg);</p>
</div>
<div class="trsf_2 pers">
<h2>perspective: 300px;</h2>
<p>transform: rotateX(40deg);</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 1rem;
background-color: #eee;
display: grid;
grid-template: auto auto / 1fr 1fr;
gap: 1rem;
}
.samp_box > div {
background-color: #fff;
}
.samp_box > div[class~="pers"] {
perspective: 300px;
}
div > h2 {
margin: 0;
padding: 0;
font-size: 1rem;
}
div > p {
width: 100%;
height: 150px;
margin: 0;
padding: .5rem;
}
.trsf_1 p {
transform: rotateY(40deg);
transform-origin: top left;
background-color: #f90;
}
.trsf_2 p {
transform: rotateX(40deg);
transform-origin: bottom left;
background-color: #09f;
}