どもです。
所用でツールを作っていたときに、コインが裏返るようなアニメーションが欲しかった。

というわけで実装してみました。

シンプルに裏返す

<div id="parent">
	<div class="front">表</div>
	<div class="flipped">裏</div>
</div>

#parent{
    position:relative; /* 子要素をabsoluteさせたい */
}
#parent div{
    position:absolute;
    top:任意;
    left:任意;
    width:任意;
    height:任意;
    backface-visibility:hidden;
    transition:all 1s ease; /* 全ての要素をアニメーション, 1秒, はじめと終わりは緩やかに変化 */
}
#parent .front{
    表面用のCSS
}
#parent .flipped{
    裏面用のCSS
    transform:rotateY( 180deg );
}
#parent:hover .front{
    transform:rotateY( 180deg );
}
#parent:hover .flipped{
    transform:rotateY( 0deg );
}

本件のミソは、transform:rotateY()とbackface-visibility:hiddenです。

transform:rotateY()は昨今よく見かけると思います、要素をY軸で回転させるスタイルです。
本件は2つの要素を同座標に重ね、Y軸回転させてアニメーションを実装。
条件を満たす(今回は:hover)ことで表示する要素を切り替えることで実装しています。

が、普通は要素を裏返すと、薄い紙を裏から透かして見たように、表面の内容が鏡写しになるだけです。

ここで必要なのが、backface-visibility:hidden。
この「表面の内容が鏡写し」をbackface-visibility要素が管理しており、hiddenにすることで回転させたときに「裏面を表示しない」要素になります。

裏面を表示しない要素同士を同座標に重ね、片方を初期値裏に設定。トリガーで表面を裏返し非表示に、裏面を表返し表示状態にする、という寸法です。

参考サイト：[cman.jp]backface-visibility「裏面の表示」

transform-styleは必要か？

参考サイトでは、回転する要素の親に「transform-style:preserve-3d;」というものが設定されていました。

#parent{
    position:relative; /* 子要素をabsoluteさせたい */
    transform-style:preserve-3d;
}

とはいえ、単純に要素を回すだけなら、このtransform-styleの設定は不要です。
transform-styleを用いる場合、

という現象が発生します。
transform-styleは、その要素と子要素の重なり方が2D的か3D的かを定めるものです。

今回、回転させる要素は平面で、親も平面です。
2D的の場合はZ軸が考慮されないため、親の上で子が回ります。
3D的にすると両者ともにZ=0となり、rotateY()によって子がY軸で回転することでZ値が生まれ、奥側のZ値がマイナスになり、その分は親より後ろになる、という了見です。

よって、親を半透明にして親に潜らせたい、親要素も回転させたいなどの特別な要望がない限り、transform-styleは不要またはflatでOKです。

参考サイト：[cman.jp]transform-style 「要素重なり時の３D表示」

ベンダープレフィックスは不要かな。

ブラウザ対応状況をCan I use…で調べて見ました。

backface-visibility
transform

投稿段階で非対応ブラウザは、OperaMiniのみ。
OperaMiniは元々こういった拡張機能を捨てて通信を軽くするブラウザらしいので、ベンダープレフィックスは不要として良さそうです。

○年前、フロント仕事の頃にはブラウザ対応状況のせいで満足に使えなかったCSS3が、もう実用段階なんだなぁと感慨深いものがありました。