クリエイターのためのWebテク講座 -CSS3を使って、くるっと回転させる(Flip)画面切り替え

今回は、CSS3の3D系のプロパティを使って、くるっと回転させて画面を切り替える、いわゆるFlipというエフェクトを作ってみます。

サンプルを見る

今回は、CSS3のtransitionと、3DTransformを使うので、Safari/Chrome/Firefox/iOSでしか動作しません。 Androidは3DTransformの対応がまだまだ微妙な感じです。

3D回転について

3Dの回転には、X軸の角度・Y軸の角度・Z軸の角度の3つの変形があり、それぞれ

Y軸回転

X軸回転

Z軸回転

の3つがあります。 Y軸は縦軸を中心に、X軸は横軸を中心に、Z軸は、正面から中心にそれぞれ回転します。

記述方法は、

-webkit-transform:perspective(1000) rotateY(45deg);
$-moz-transform:perspective(1000px) rotateY(45deg);

-webkit-transform:perspective(1000) rotateX(45deg); 
-moz-transform:perspective(1000px) rotateX(45deg);

-webkit-transform:perspective(1000) rotateZ(45deg);
-moz-transform:perspective(1000px) rotateZ(45deg);

このように記述します。今回ベンダープリフィックスのフレームワークを使わずに、直接記述しているのは、「perspective」プロパティの値の書き方が若干違うからです。

「perspective」は奥行を意味します。つまり、ここの値を設定することで、3D回転に奥行が生まれます。逆に、ここに値を設定しない限り、XY軸の3D回転は、単に縮小しているようにしか見えません。

設定方法は、0以外の数を入れるのですが、値が大きくなればなるほど、奥行きが緩やかになり、逆に小さい値だと、奥行き感がきつくなります。

回転させよう

次に、回転のロジックを作りましょう。まずはこちらを見てください。

サンプルを見る

このサンプルでは、回転のロジックを可視化したものです。 Y軸が90度、-90度になると、画面から消えてしまいます。なぜかというと、要素は平面なので、正面を向くと紙切れのように見えなくなってしまいます。それを利用して、見えないようにしているのです。

次に、上の画像非表示になったと同時に、下の画像を出しています。

ここで、アニメーションを開始するY軸の値をマイナスの値にしています。 3D回転で、開始の値の符号を変えると、逆方向の動きになります。それを利用して、消えるときは正の方向に回転、表示するときは、負の方向から回転、という風にするのです。

回転の原理は簡単ですね。

function nextStep(value1 , value2)
{
    $(".image" + value1).css("-webkit-transition" , "ease-in 0.5s -webkit-transform");
    $(".image" + value1).css("-webkit-transform" , "perspective(1000) rotateY(-90deg)");

    $(".image" + value1).css("-moz-transition" , "ease-in 0.5s -moz-transform");
    $(".image" + value1).css("-moz-transform" , "perspective(1000px) rotateY(-90deg)");

    setTimeout(function ()
    {
        $(".image" + value1).css("-webkit-transition" , "none");
        $(".image" + value1).css("-webkit-transform" , "perspective(1000) rotateY(90deg)");

        $(".image" + value2).css("-webkit-transition" , "ease-out 0.5s -webkit-transform");
        $(".image" + value2).css("-webkit-transform" , "perspective(1000) rotateY(0deg)");

        $(".image" + value1).css("-moz-transition" , "none");
        $(".image" + value1).css("-moz-transform" , "perspective(1000px) rotateY(90deg)");

        $(".image" + value2).css("-moz-transition" , "ease-out 0.5s -moz-transform");
        $(".image" + value2).css("-moz-transform" , "perspective(1000px) rotateY(0deg)");
    } , 500);
}

スクリプトはこれだけです。クリックされるごとに、-90方向にアニメーションさせて消します。アニメーションが終わった頃合いで、90度のところから、次の画像をアニメーションさせることで、あたかも裏返っているような錯覚を覚えるのです。

なお、ちょっとした小技ですが、「-webkit-transform-style: preserve-3d;」を設定し、「-webkit-transform:perspective(1000) rotateY(0deg);」等と、3D系の指定」に、0の値でもなんでもいいので入れておくと、iOSで、3D系のコンテンツだと判断されて、ハードウェアアクセラレーションが有効になり、ちらつきなどをおさえ、なめらかにアニメーションさせることができます。

iOS5までは、「-webkit-transform-style: preserve-3d;」これだけの記述でよかったのですが、iOS6からは、なにかしら値を入れなくてはいけなくなってしまいました。