CSSリファレンスマニュアル

CSS@ルール(RULES)

CSS属性完全指南

CSS background属性 CSS3 アニメーション-タイミング-function 属性

CSS3 バックフェース-visibility属性の使用方法および例

CSS3のbackface-visibility属性は、変換された要素の「背面」がユーザーに向かって見えるかどうかを決定します。

以下の表は、この属性の使用状況とバージョン履歴をまとめています。

デフォルト値：	visible
適用：	変形可能要素
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの文法:	object.style.backfaceVisibility="hidden"

バックフェース-visibilityの使用文法

この属性の文法は以下の通りです：

バックフェース-visibility: visible | hidden | initial | inherit

以下の例は、backfaceを使用する方法を示しています。-visibility属性。

例

.flip-container　{
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display: inline-block;
　　　　}
　　　　.flip-container:hover .card　{
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.card, .front, .back　{
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card　{
　　　　　　　　position: relative;
　　　　　　　　transition: 0.5s all;
　　　　　　　　トランスフォーム-style: preserve-3d;
　　　　}
　　　　.front, .back　{
　　　　　　　　position: absolute;
　　　　　　　　バックフェース-visibility: hidden;
　　　　}
　　　　.front　{
　　　　　　　　z-index:　1;
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.back　{
　　　　　　　　z-index:　2;
　　　　　　　　transform: rotateY(0deg);
　　　　}

テストを見て‹/›

注意：バックフェース-visibility属性は、回転コインやカードフリップなどのアニメーションを作成するのに非常に役立ちます。このアニメーションでは、2つの異なる画像（つまり正面と背面）を組み合わせて、より良い3D回転効果。

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
visible	背面が見えることを指定し、正面のミラーリング表示を許可します。デフォルト値です。
hidden	背面が見えないことを指定し、正面を隠します。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のbackfaceを使用します。-visibility属性の計算値。

ブラウザの互換性

バックフェース-visibility属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 10+ ^-moz-、16 + Google Chrome 12+ ^-webkit-、36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- オペラ 15+ ^-o-、23+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3トランジション、CSS3 3D変換、CSS3アニメーション。

CSS background属性 CSS3 アニメーション-タイミング-function 属性