CSSを使用して遠近効果を実現する
今日はCSSを使用して遠近効果を実現するというアイデアを思いつきました。最初は、オフセットを通じて複数の div を使用してシャドウ効果を追加する一般的な方法を考えましたが、これには多くの div が必要であり、理想的ではありません。そこで、CSS のプロパティである border を思いつきました。これは、境界線の接合部に斜めの効果を生み出すことができます。これは 2 つの div で実現できます。最初に最終的な効果を見てから、実装プロセスを分析しましょう。
まず、境界線がどのように斜めの効果を生成するかを見てみましょう。次のコードを HTML の先頭に追加すると、そのような効果が表示されます。
.border{幅:0;高さ:0;ボーダー幅:50px;ボーダーカラー:#f00 #0f0 #00f #000;ボーダースタイル:solid;}
上記の基盤を使用すると、2 つの追加 div を使用して遠近効果を実現できます。
1. HTML コードは次のとおりです。
<div class="perspective-outer">
<div class="perspective-r"></div>
<div class="perspective-b"></div>
<div class="perspective-inner">遠近効果要素</div>
</div>
2.CSSコード:
.perspective-outer{
位置:相対;
width:170px;/*遠近効果を実現する要素の幅 + 遠近距離*/
height:140px;/*遠近効果を実現する要素の高さ + 遠近距離*/
}
.perspective-inner{
ボーダー:1px ソリッド #f60;
高さ:118ピクセル;
幅:148ピクセル;
背景色:#fff;
}
.perspective-r、
.perspective-b{
位置:絶対;
幅:0;
高さ:0;
}
.perspective-r{
右:0;
height:100px;/*遠近効果を実現する要素の高さ (120px) - (border-top:20px)*/
border-left:20px ソリッド #000;/*右視点の距離*/
border-top:20px Solid #fff;/*下の遠近距離*/
}
.perspective-b{
下:0;
width:150px;/*最も外側の要素の幅 (170px) - border-left*/
border-left:20px 実線 #fff;
border-top:20px ソリッド #000;
}
.perspective-outer は高さと幅を定義し、右側と下のパースペクティブ領域が対応する位置に配置されるようにそれらを相対的に配置します。高さと幅の値は、パースペクティブを実現する要素の高さです。効果に対応する遠近距離を加えたものです。 .perspective-r は高さの値を設定するだけでよく、その値は .perspective-outer の高さから border-top を引いたものです。 .perspective-b は幅の値を設定するだけでよく、その値は .perspective- の幅です。外側のマイナスボーダー左。 .perspective-r の border-top と .perspective-b の border-left の幅の値によって遠近角が決まります。 .perspective-r の border-left と .perspective-b の border-top の幅の値によって遠近距離が決まります。このうち、.perspective-rのborder-topと.perspective-bのborder-leftの色は親要素の背景色です。ここでのテストページの親要素はbodyなので白です。
3. 追記
この記事は単なるテストであり、他の人にインスピレーションを与えることを目的としています。この方法がどれほど実用的かは気にしませんが、少なくとも問題を解決する方法を提供してくれるでしょう。この記事があなたのお役に立てば幸いです。