CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbackface-visibilityプロパティとは？使い方とサンプルコード解説

CSSのbackface-visibilityプロパティとは

backface-visibilityプロパティは、要素が画面（閲覧者）の方を向いていない状態、つまり裏面が見えているときに、その要素を表示するかどうかを指定するためのCSSプロパティです。

このプロパティは、transformによる3D変換（rotateX()やrotateY()など）を適用した要素に対して効果を発揮します。裏返った要素の背面を見せるか隠すかを制御できるため、カードをめくるようなフリップアニメーションなどでよく活用されます。

指定できる値

  • visible（初期値）：要素が裏向きになっても背面を表示します。
  • hidden：要素が裏向きになった場合、非表示になります。

使用例

次の例では、親要素にperspectiveを設定して3D空間を作り、子要素を回転させたうえでbackface-visibility: visible;を適用しています。これにより、回転後も要素の背面がどのように表示されるかを確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        position: relative;
        width: 150px;
        height: 150px;
        background-color: yellow;
        perspective: 80px;
        margin: 50px;
        perspective-origin: left;
        transform: rotateY(180deg);
      }
      .demo2 {
        position: absolute;
        padding: 20px;
        background-color: orange;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
        backface-visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1>Rotation</h1>
    <div class = "demo1">Demo
      <div class = "demo2">Demo
      </div>
    </div>
  </body>
</html>

実務での活用ポイント

backface-visibility: hidden;を使うと、裏返った要素を完全に隠すことができます。これは、表と裏の2枚の要素を重ねて配置し、ホバーやクリックで反転させる「カードめくり」UIを実装する際に不可欠なテクニックです。また、3D変換を使用する場合は、親要素にperspectiveやtransform-style: preserve-3d;を組み合わせることで、より自然な立体表現が可能になります。

  1. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>

  2. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し