Blog

CSS3のtransform3dを使った奥行きの効果

2016.03.29Cat:css3 デザイナー
nino-eye

CSS3では3Dの効果を要素につけることができます。

アプリのデザインとブラウザで閲覧するWEBページのデザインが近づいていく中、
この効果が有効になってくることが予想されます。

そこで、今回はその一つを試しに作ってみました。

↓作ってみたもの

DEMO

ポイント

3Dの効果を付ける要素の親要素にCSS3のperspectiveを適用する

上記のようなHTMLでsectionに効果を付ける場合は、

親要素であるmainに上記のようにperspectiveを指定します。

対象要素にtransform3dを適用する

対象の要素にtransformの中でも3dで始まるtransfomr3dを適用して、効果をつけます。
効果の具合が奥行きによって変化するので、
一つずつ違っています。

実用で利用する場合は、JSにより、奥行きによって自動的に3Dの効果を変化させるほうが良さそうです。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ