CSS3のtransform3dを使った奥行きの効果
CSS3では3Dの効果を要素につけることができます。
アプリのデザインとブラウザで閲覧するWEBページのデザインが近づいていく中、
この効果が有効になってくることが予想されます。
そこで、今回はその一つを試しに作ってみました。
↓作ってみたもの
ポイント
3Dの効果を付ける要素の親要素にCSS3のperspectiveを適用する
|
1 2 3 4 5 6 7 8 9 10 11 | <main> <section> ・・・ </section> <section> ・・・ </section> <section> ・・・ </section> </main> |
上記のようなHTMLでsectionに効果を付ける場合は、
|
1 2 3 | main { perspective: 2000px; } |
親要素であるmainに上記のようにperspectiveを指定します。
対象要素にtransform3dを適用する
|
1 2 3 4 5 6 7 8 9 10 11 12 | section:first-child { transform: scale3d(0.9, 0.9, 0.9) rotate3d(1, 0, 0, 0) translate3d(0, -100px, 0); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } section:nth-child(2) { transform: scale3d(0.9, 0.9, 0.9) rotate3d(1, 0, 0, -15deg) translate3d(0, -25px, 50px); box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); } section:last-child { transform: scale3d(1, 1, 1) rotate3d(1, 0, 0, -20deg) translate3d(0, 150px, 100px); box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); } |
対象の要素にtransformの中でも3dで始まるtransfomr3dを適用して、効果をつけます。
効果の具合が奥行きによって変化するので、
一つずつ違っています。
実用で利用する場合は、JSにより、奥行きによって自動的に3Dの効果を変化させるほうが良さそうです。
Author Profile
SHARE