Blog

CSS3のtransform3dとjQueryを使って、ひっくり返すアニメーション

2016.04.19Cat:css3 jQuery デザイナー

対応する必要のあるブラウザがどんどん新しい物に移り変わっていく今、
CSS3ならではの表現も利用しやすくなってきています。

今回はCSS3を使った表現の中でも、
ひっくり返すことでコンテンツが切り替わるようなアニメーションの方法について、
考えてみました。

↓作ってみたもの

DEMO

方法

1. 要素を配置する

pic01

回転の対象となるコンテンツを重ねて同じ位置に配置し、
それらを少なくとも2つの要素で囲みます。

DEMOでは、各コンテンツ(<section>)をwrapperというクラスをつけた<div>で囲み、
それらを<main>で囲んでいます。
.wrapperが実際に回転する要素となります。

一番外の枠となっている要素には、以下のように、CSSでperspectiveという指定を行い、
この要素で遠近法が適用されるようにします。

2.アニメーションの準備をする

今回の方法では、コンテンツを囲っている要素を回転させることで、
コンテンツが回転しているように見せます。

pic02

.wrapperはanimateとanimateEndというクラスを連続で切り替えてアニメーションを設定し、

コンテンツはanimateとactiveというクラスを切り替えてアニメーションを設定します。

jQueryではクラスの付け替えのみを行っています。
ただ、今回はコンテンツの前後が入れ替わるときに、z-indexと左右反転の処理が必要なため、
2段階のアニメーションを行う必要があります。
そのため、setTimeoutでクラスの付け替えに時間差をつけています。

 

Author Profile

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

Archive

ページTOPへ