• かちびと.net

    css3で実装する3Dなロールオーバーエフェクトのサンプルのご紹介。cssで3Dを表現しよう、という趣旨です。あと、translate3dとかperspectiveの触りを少々。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

css3で実装する3Dなロールオーバーエフェクトのサンプル

スポンサーリンク

面白かったのでご紹介。マウスホバーによるロールオーバーエフェクトをcssで3D表現したサンプルです。休日ですし、ちょっとネタ的な内容ですけど、これはこれで勉強になりました。いろいろと考えますね、ほんと・・

例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。

3D CSS rollovers


マウスを乗せると縦とか横に回転します。

見ないとピンと来ないですよねという事でサンプルです。cssのみで動作しています。Chrome推奨。下にスクロールすれば何点かデモがあります。

Sample

translate3dとかperspective

この3D化にはtranslate3dというCSS3が使用されています。


極めていい加減な画像ですがX、Y、Z軸はこうなっています。

.box .front {
  -webkit-transform: translate3d(0,0,200px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,200px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,200px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,200px) scale(0.85,0.85);
          transform: translate3d(0,0,200px) scale(0.85,0.85);
}

translate3d(X, Y, Z)となりますのでこの場合はZ軸に200px動かす、という指定です。先ほどの図でいうと、真ん中の青い部分が0の地点ですので、そこから200px分3D移動する事になります。3D移動って言うと凄く分かりにくいですけど・・Z軸に沿って青い部分から200px離れます。

.flip .rollover {
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

perspectiveというのは奥行きを指定するプロパティです。たぶん基本的にtransformを併用するっぽい。

transform: perspective( 800 );

こんな形でもいいみたいです。分かりやすいサンプルがありましたので宜しければ→(Perspective 3)

数値は奥行きの深さを指定するものです。以下はサンプル。画像のサイズは同じで、transform: rotateY(20deg);基準とします。

これは perspective: 100px;。

これがperspective: 700px;です。

これがtransform: rotateY(-5deg);だと以下のようになります。

これにアニメーションエフェクトを加えると映像コンテンツなんかで見かけるような表現が出来そうな匂いがしてきます。ちょっとやっつけで申し訳ないですがw

perspectiveはこうした奥行きのあるエレメントを表現、調整する事が出来ます。ただ、ほぼ現状はWebkitや一部のモダンブラウザのみ対応なので今日のサンプルのようにhoverで何かしらする機会はおそらく無さそうです。実際に利用する場合、基本的にはkeyframesありき、といった感じでしょうか。アニメーションならスマフォに利用できますね。

ただ、translate3dに関して、iOSでアニメーションがチカチカする場合がありますが、プロパティの指定法を変えればGPUアクセラレーターがONの状態で処理してくれるみたいです。詳しくはこちらをご覧下さい。(参照:GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法)

こうしたcss3のプロパティを元に先ほどのサンプルのような3Dエフェクトを作成します。というか僕も勉強不足なので全然説明できませんが。

3Dに関しては3D CSS Testerでいろいろとテストすることが出来ます。

こうしたプロパティを使用することで、スマートフォンでの表現法もかなり広がりますのでちょっとでも覚えておくといい事があるかもしれません。

サンプルソースと3D CSS Testerは以下よりどうぞ。

Create progressively enhanced 3D CSS rollovers / 3D CSS Tester

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services