Blog

CSSの3D回転で切り替える画像ビューアを作ってみました

2017.07.18Cat:css3 jQuery デザイナー

CSS3 では  3Dを扱うプロパティが用意されていますが、
CSS3 が登場してからしばらくはブラウザが対応していなかったり、
ブラウザが対応していてもデバイスの環境が対応していなかったりと、
利用できる環境(OpenGL 2.x 以上に対応した GPU が必要)が限られていたため、実用での利用は限られていました。

しかし、現在ではブラウザもほとんどが CSS3 の 3D 関係のプロパティに対応し、デバイスもほとんどが対応するようになってきて、実際に CSS で 3D を扱ったサイトを見かける機会が増えてきました。

そんな中、CSS3 の 3D 関連のプロパティを扱えるようになる必要性を感じ、
実際に使い方を調べながら何かを作ってみようと思い立ちました。

そこで今回は、立体的に回転して切り替わる画像ビューアを作ってみましたので、
作り方やポイントをご紹介いたします。

↓作ってみた物
DEMO

 

作り方

流れ

  1. ビューアのコンテナになる要素に perspective を設定し、ビューアに transform-style を設定
  2. ビューアの中の要素を 3D で配置
  3. jQuery でビューアを回転させる

 

1. ビューアのコンテナになる要素に perspective を設定し、ビューアに transform-style を設定

CSS3 では translate3d や rotate3d といった指定を行うことで、3D での配置を行うことができます。
しかし、3D で要素を配置しても、そのままでは配置の仕方によっては、見る人に3Dであることを感じさせづらい場合もあります。
↓例
DEMO

その原因の1つは、デフォルトだと、3D に配置した要素に遠近法(パース)が適用されていないためです。

CSS3 では perspectiveという 遠近法を指定するプロパティを設定することで、遠近法を適用したより立体感のある表現を行うことができます。

この指定は、遠近を出したい要素の親要素に指定する必要があります。

さらに、3Dに配置した要素を親要素でまとめて回転させたりしたい場合、
そのままでは 3D に配置した絵を回転させているような挙動になってしまいます。
↓例
DEMO

3Dに配置した要素を親要素でまとめて回転させたりしたい場合は、親要素に、transform-style で preserve-3d を指定する必要があります。

ただ、こちらの指定は、IE11ではサポートされておらず、
IE11では、別の方法を使う必要があります。
参考:IEでpreserve-3dは使えないが何とかする方法 | Qaramell Blog

 

2. ビューアの中の要素を 3D で配置

ビューアの枠の準備ができたら、中の要素を 3D で配置します。
今回は立方体の形に配置します。

上のようなイメージで配置します。
今回は 320px × 320px の要素を配置するので以下のようなコードになりました。

 

3. jQuery でビューアを回転させる

先程 transform-style を設定した親要素を、jQuery を使って回転させます。

 

参考サイト

HTMLとCSSのみで3D立方体を作ってぐりぐり回してみる。 | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 (東京・千代田区)

IEでpreserve-3dは使えないが何とかする方法 | Qaramell Blog

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ