CSSの3D回転で切り替える画像ビューアを作ってみました
CSS3 では 3Dを扱うプロパティが用意されていますが、
CSS3 が登場してからしばらくはブラウザが対応していなかったり、
ブラウザが対応していてもデバイスの環境が対応していなかったりと、
利用できる環境（OpenGL 2.x 以上に対応した GPU が必要）が限られていたため、実用での利用は限られていました。
しかし、現在ではブラウザもほとんどが CSS3 の 3D 関係のプロパティに対応し、デバイスもほとんどが対応するようになってきて、実際に CSS で 3D を扱ったサイトを見かける機会が増えてきました。
そんな中、CSS3 の 3D 関連のプロパティを扱えるようになる必要性を感じ、
実際に使い方を調べながら何かを作ってみようと思い立ちました。
そこで今回は、立体的に回転して切り替わる画像ビューアを作ってみましたので、
作り方やポイントをご紹介いたします。
↓作ってみた物
DEMO
作り方
流れ
- ビューアのコンテナになる要素に perspective を設定し、ビューアに transform-style を設定
- ビューアの中の要素を 3D で配置
- jQuery でビューアを回転させる
1. ビューアのコンテナになる要素に perspective を設定し、ビューアに transform-style を設定
CSS3 では translate3d や rotate3d といった指定を行うことで、3D での配置を行うことができます。
しかし、3D で要素を配置しても、そのままでは配置の仕方によっては、見る人に3Dであることを感じさせづらい場合もあります。
↓例
DEMO
その原因の１つは、デフォルトだと、3D に配置した要素に遠近法（パース）が適用されていないためです。
CSS3 では perspectiveという 遠近法を指定するプロパティを設定することで、遠近法を適用したより立体感のある表現を行うことができます。
|
1 2 3 | .container { perspective: 1000px; /* ← ユーザから要素までの距離を想定 */ } |
この指定は、遠近を出したい要素の親要素に指定する必要があります。
さらに、3Dに配置した要素を親要素でまとめて回転させたりしたい場合、
そのままでは 3D に配置した絵を回転させているような挙動になってしまいます。
↓例
DEMO
3Dに配置した要素を親要素でまとめて回転させたりしたい場合は、親要素に、transform-style で preserve-3d を指定する必要があります。
|
1 2 3 | .parent { transform-style: preserve-3d; } |
ただ、こちらの指定は、IE11ではサポートされておらず、
IE11では、別の方法を使う必要があります。
参考：IEでpreserve-3dは使えないが何とかする方法 | Qaramell Blog
2. ビューアの中の要素を 3D で配置
ビューアの枠の準備ができたら、中の要素を 3D で配置します。
今回は立方体の形に配置します。
上のようなイメージで配置します。
今回は 320px × 320px の要素を配置するので以下のようなコードになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | li:first-child { -webkit-transform: translate3d(0, 0, 160px) rotateX(0deg); transform: translate3d(0, 0, 160px) rotateX(0deg); z-index: 1; } li:nth-child(2) { -webkit-transform: translate3d(0, 160px, 0) rotateX(-90deg); transform: translate3d(0, 160px, 0) rotateX(-90deg); z-index: 0; } li:nth-child(3) { -webkit-transform: translate3d(0, 0, -160px) rotateX(180deg); transform: translate3d(0, 0, -160px) rotateX(180deg); z-index: -1; } li:nth-child(4) { -webkit-transform: translate3d(0, -160px, 0) rotateX(90deg); transform: translate3d(0, -160px, 0) rotateX(90deg); z-index: 0; } |
3. jQuery でビューアを回転させる
先程 transform-style を設定した親要素を、jQuery を使って回転させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var transformDeg = 0, transformIndex = 0; $(function() { var $sliderThumbnail = $(".imageViewer__thumbnails a"); $(".imageViewer__sliderWrapper").on("click", function() { transformIndex++; if(transformIndex > 3 || transformIndex < 0) transformIndex = 0; $(".imageViewer__slider").css({ "transform": "translate3d(0, 0, -160px) rotateX(" + (90 * transformIndex) + "deg)", "transform-style": "preserve-3d" }); $sliderThumbnail.removeClass("is-active"); $sliderThumbnail.eq(transformIndex).addClass("is-active"); }); $sliderThumbnail.on("click", function(e) { e.preventDefault(); transformIndex = $sliderThumbnail.index($(this)) - 1; $(".imageViewer__sliderWrapper").trigger("click"); }); }); |
参考サイト
HTMLとCSSのみで3D立方体を作ってぐりぐり回してみる。 | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 （東京・千代田区）
Author Profile
SHARE
