perspective

perspective（パースペクティブ）は要素の奥行きの深さを指定するプロパティである。
例えば、transformでX軸やY軸に回転した要素に奥行きの深さを数値で指定し、立体的に表示することが可能である。ただし、値をnoneや0以下で指定した場合は、奥行きが表示されない。

<div>
  <p>要素</p>
</div>

div {
  width: 200px;
  height: 200px;
  background-color: lightgrey;
  perspective: 200px;
}
p {
  width: 200px;
  height: 200px;
  background-color: lightyellow;
  transform: rotateY(40deg);
  transform-origin: left;
}

上記の例では、親要素にdivタグを、子要素にpタグを用意している。
divタグには、奥行きの深さを指定するために「perspective: 200px;」と指定。そして、pタグにはY軸方向に40度回転するよう、「transform: rotateY(40deg);」と指定し、「transform-origin: left;」で原点を左に設定する。

transformのperspectiveとの違い

perspectiveと似た働きを持つもので、transformの値のperspectiveがある。
それぞれの違いは以下の通り。

• perspective（プロパティ）：親要素自身に適用される
• transformのperspective（値）：子要素に適用される

つまり、perspectiveはtransformを指定している要素の親要素に指定する。
そして、子要素だけに奥行きを指定したい場合は、その子要素にtransformでperspectiveを指定する。