フリップアニメーションを実装する[CSS / jQuery]
posted : 2018.12.30
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
今回はフリップアニメーションで遊んでみました。
ホバーイベントでフリップさせる（CSSのみの）サンプル記事は結構あるようなので、JSでクリック制御にしてみました。
クリックイベントでフリップするWEB名刺
まずはサンプルを。
ホバーイベントで各要素が出現、さらにそこからクリックイベントでフリップします。
正直遊んでるうちにやや実装が混み入ってしまいましたが（苦）
でも基本的なフリップの仕組みはそこまで複雑ではありません。
わかりやすく最低限の実装で作ってみたものがこちら。
こちらのサンプルで解説していきます。
実装フロー[準備編]
- カードの表と裏要素、そしてそれらを包む親要素を用意する
- 親要素にCSSのperspectiveプロパティを指定
- 子要素それぞれにbackface-visibility : hidden;を指定
- 裏にあたる子要素をあらかじめ裏返しておく
①親要素にposition:relative; 子要素それぞれにposition:absolute;でぴったり配置
positionプロパティのテクニックで、要素をぴったりと重ね合わせます。
二つの子要素のtopとleftは0にすると親要素を起点に配置されます。
②親要素にCSSでperspectiveプロパティを指定
perspectiveは3D配置された子要素に遠近感を与えるプロパティ。
簡単に言うとその要素をどれだけ離れた位置から見るか、ということ。
サンプルでは値を1000pxにしてますが、これは1000px離れたところからその要素を見ていることを表します。
近ければ近いほど要素は立体的に見えるし、遠いほど3D感は控えめになります。
③子要素それぞれにbackface-visibility : hidden;を指定
backfaceという言葉通り、要素の裏側を可視化するかどうかのプロパティ。
フリップアニメーション時に裏返った要素は見えてほしくないので、子要素それぞれにhidden値を設定します。
④裏にあたる子要素をあらかじめ裏返しておく
裏側の要素にtransform:rotateY（もしくはX）で-180deg（もしくは180deg）を設定しておきます。
Y軸を中心に回転（横回転）させるか、X軸を中心に回転させるか（縦回転）ということですね。
実装フロー[イベント編]
イベントはJSもしくはjQueryでクラスを付与するだけなので簡単です。
ソースもシンプルなので解説は省略。
- クリックイベントで親要素にフリップ用クラスを追加
- フリップ用クラスの付いた表裏の子要素をtransform:rotateでそれぞれ回転させる
ポイント・注意点
親要素にoverflow:hidden;は指定しない
回転時に遠近感を出した部分（＝親要素幅をはみ出した部分）が非表示になってしまうので、子孫要素のレイアウトの都合上overflow:hidden;したい場合は、子要素（表裏のコンテナ）側で指定する必要があります。
正直overflow:hidden;とtransform系の指定は相性が悪い気がします。。
シンプルに回転させるだけであればtransform-style: preserve-3d;は不要
一般的にフリップアニメーションの解説記事では親要素にtransform-style: preserve-3d;を指定するケースが多い印象ですが、上記の実装であれば不要と思われます。
ソースをいじるとわかるんですが、指定の有無で挙動が変わりません。
指定が必要となるのは後述するサンプルのように、z軸を指定した要素が存在する場合かと。
3Dでフリップアニメーションさせてみる
フリップアニメーション自体3Dなのでアレですが、さらにZ軸も使ってみます。
どうでしょう？結構印象変わりますよね。
パララックス感も追加されて、さらに3D感が増した感じです。
実装のポイント
- 表裏の子要素に transform-style : preserve-3d; を指定
- 孫要素以降にtransform : translateZ(70px);を指定
- z軸を指定した要素にもbackface-visibility : hidden;を指定
①transform-style : preserve-3d;でZ軸の表現を有効に
要はこのケースの場合、Z軸の位置指定（②）の分だけ要素を浮かせて見せるようにしています。
②孫要素以降にtransform : translateZ(70px);を指定
①でZ軸の表現が有効となった為、ここの指定分だけ要素が浮いて見えるようになります。
③z軸を指定した要素にもbackface-visibility : hidden;を指定
ここが結構重要かも。
特定の実装内容や環境（主にwindows環境）で、z軸を指定した要素だけ裏側が透けてしまうことがあります。backface-visibilityが継承しないプロパティからなのか、transform系の指定でスタックコンテキストが生成されるからか定かではないですが、うまくいかない時の為に指定した方が良さげ。
ちなみにサンプルではwindows環境のみで裏側の「3D-BACK」の文字が透けてしまったので、この指定で解決しています。
終わりに
基本的な仕組みはそこまで複雑ではないんですが、transform系プロパティを多用すると結構不具合出ます（苦笑）。
対処してるうちにハマるケースや、そもそもブラウザ間の挙動も微妙に変わるのでそこだけ注意かなという感じ。
なるべくシンプルなUIで実装する方がベターですかね～。
