サンプル例1の内容

【例1】backface-visibility の [visible] と [hidden] を普通に比較してみました。
白枠ホバーで黄色BOXが180degY軸回転します。

テスト1は「backface-visibility : visible;」、
テスト2は「backface-visibility : hidden;」を指定しています。
テスト2の方は、90度回転後からの裏面が非表示となります。
※IE10 の場合、テスト2が回転が終わるまでは裏面が表示され、最後に裏面が非表示になっていました。

例1へ

サンプル例2の内容

【例2】親子でbackface-visibilityの値が違う場合の実験です。
白枠ホバーで黄色BOXが180degY軸回転します。

テスト1 黄色BOXに「backface-visibility : visible;」青色BOXに「backface-visibility : hidden;」を指定しています。
テスト2 黄色BOXに「backface-visibility : hidden;」青色BOXに「backface-visibility : visible;」を指定しています。

結果、テスト1の青色BOXは表示されました。テスト2は黄色BOXごと非表示になっています。

親BOXが visible で、親が回転して裏面が表示されると、子の hidden は無視されていました。
※IE10 の場合では、テスト2の回転が終わるまでは裏面が表示され、最後に裏面が非表示になっていました。

例2へ

サンプル例3の内容

【例3】例2に、[transform-style : preserve-3d;] を指定してみた実験です。
白枠ホバーで黄色BOXが180degY軸回転

テスト1 黄色BOX(オレンジ色)に「backface-visibility:visible;」と「transform-style:preserve-3d;」を指定しています。
子要素の青色BOXに「backface-visibility:hidden;」を指定。
テスト2 黄色BOXに「backface-visibility:hidden;」と「transform-style:preserve-3d;」を指定しています。
子要素の青色BOXに「backface-visibility:visible;」を指定。

結果、GC（とOpera）では、子要素のみ非表示となりました。（想定した結果）
FFでは、テスト1の青色BOXは背景色のみ非表示となり、文字は表示されています。（バグなのかは不明です）
IE10は、transform-style:preserve-3d 未対応なので 例2 と同じです。

テスト2は黄色BOXごと非表示になっています。(例2と同じで親要素が非表示なので、子要素は非表示)

※IE10 の場合、テスト2の回転が終わるまでは裏面が表示され、最後に裏面が非表示になっていました。

例3へ

例4 親(オレンジ)と子(青)の両方にpreserve-3dを指定してみた

例3の「preserve-3d」を親ボックスと子ボックスの両方に指定してみました。

GC(とOpera)は例3と同じです。
IE10は、transform-style:preserve-3d 未対応なので、設定してない例2と同じ動作になりました。
FFのテスト1 は、GCの例3と同じで 黄色裏面表示 ＆ 青ボックスとそのテキストが非表示、になりましたが、テスト2の方はGCなどのwebkit系では親要素に従って子要素の指定を無視していたのと違い、素直に親の裏面を非表示、子の裏面を表示、になっています。

※IE10は、transform-style : preserve-3d 未対応なので 例2 と同じです。
※IE10 の場合、テスト2の回転が終わるまでは裏面が表示され、最後に裏面が非表示になっていました。

例4へ

考察

IE10がtransitionアニメ動作中は裏面非表示にならない結果となりましたので、IE10対応を考えると、transitionのアニメ動作での裏面非表示は現状あきらめるしかないと思います。
また、なんとなく親子両方に transform-style : preserve-3d を指定したFFの方が想定通りになっているような気もしますが、ブラウザごとに違いがあるので、子要素の裏面の処理については別の対策をする必要があるかもしれません。
※例えば、回転する要素の裏に180度回転させた別の要素を配置する、など

要素の裏面の表示非表示指定プロパティ

backface-visibility:visible

裏面を表示し、鏡像が表示される。

backface-visibility:hidden

裏面を非表示。

ページトップへ