css 奥行きを表現しよう

個人開発だと、インフラ周りもやらなきゃいけないし、フロントエンドも書かなきゃいけないので、やることが多いです。

ただでさえ素人なのに。

さて、もうちょっとおしゃれな見た目にしようと思って、フロントエンドを再勉強中です。

みなさん、cssで奥行きを表現する方法はご存じですか？

CSSの transform:perspective は、3D変形の遠近効果を調節する際に使用するプロパティで、奥行のある表現を可能にします。

これとは別に、transform が付かない perspective というプロパティもありますが(効果は同じ)、ここでは指定した要素自身に効果を与えることができる transform:perspective を使用しています。

transform:perspective は、ピクセルで指定し、数値は低ければ低いほど遠近感が強くなり、逆に数値が大きいと遠近感は緩やかになります。