CSS - backface-visibility

• トップ
• CSSリファレンス
• backface-visibility

概要

サポート (説明)

説明

transform で要素を回転させた際に、背面を表示する・しないを指定します。トランプのカードを回転させる様に、表のパネルと、180度回転した裏のパネルを重ね合わせて表示する際、裏が表示される時は表示しないように制御するのに有効です。

使用例

表のパネル(panel-1)と、180度回転した裏のパネル(panel-2)を張り合わせて回転させています。どちらも裏面が表示されないように制御しています。IE11 では preserve-3d がサポートされていないためうまく動きません。

.container {
  margin: 10px;
  padding: 10px;
  width: 80px;
  height: 80px;
  border: 1px solid #999;
  font-size: 36pt;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 200px;
  animation: rotate 2s linear infinite;
}
.panel-1 {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid #999;
  background: #fcc;
  backface-visibility: hidden;
}
.panel-2 {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid #999;
  background: #666;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

<div class="container">
 <div class="panel-1">表</div>
 <div class="panel-2">裏</div>
</div>

関連項目

リンク

• http://www.w3.org/TR/css-transforms-1/#backface-visibility-property
• https://developer.mozilla.org/ja/docs/Web/CSS/backface-visibility
• http://caniuse.com/#search=transform