CSS3: backface-visibility プロパティ - 要素裏面の可視・不可視の指定

■ 概要

項  目説  明
記述形式 セレクタ {backface-visibility: }
値 の形式 visiblehidden
初 期 値 visible
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 transform プロパティ で変形可能な要素
継  承 しない

■ 解説

backface-visibilityプロパティ は,要素裏面の可視・不可視 を指定します。

このプロパティは,たとえばトランプのカードのように2つの要素を背中合わせで張り合わせるような場合に有用です。 このプロパティによる指定がないとカードを裏返すアニメーションでは,そのたびに表面と裏面の要素の位置の入れ替えが必要になります。

もうひとつの例としては,6つの要素からなる箱の蓋を開けて内部を見るような場合が挙げられます。 これは,3Dの舞台の背景を作るときに有用です。

指定できる値の形式は,以下のとおりです。

説  明
visible 背面を表示します。
hidden 背面を表示しません。

なお,backface-visibilityプロパティ の値を hidden に指定した要素の可視・不可視は,次のようにして決まります。

  1. 3次元空間内での 3D変換を考える場合,すなわち,transform-styleプロパティ の値が preserve-3 に指定されている場合は,3D変換行列の累積値を計算します。  また,2次元空間内での変換を考える場合,すなわち,transform-styleプロパティ の値が flat に指定されている場合は,2D変換行列の値を計算します。
  2. 3次元空間内,2次元空間内のどちらの変換をした場合も,対応する 3D変換行列において, 3行-3列成分の値が負である場合は,表示されません。 それ以外で,この成分の値が正または 0 である場合は,表示されます。

■ 使用例( backface-visibility プロパティの利用)

現在準備中です。

■ 備考

【参考ページ】