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);だと以下のようになります。

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

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

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

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

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