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

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

↓作ってみたもの

DEMO

方法

1. 要素を配置する

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

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

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

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

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

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

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

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