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

CSSのbackface-visibilityプロパティで要素の裏面表示を制御する方法

3D変換を適用した要素が、画面に対して裏向きになったときにその面を表示するかどうかを決定するには、CSSの backface-visibility プロパティを使用します。

backface-visibilityとは

backface-visibility は、要素が回転などによって画面から背を向けた状態（裏面）になった際に、その裏面を可視化するか非表示にするかを指定できるプロパティです。カードをめくるようなフリップアニメーションなど、3D効果を実装する際によく活用されます。

  • visible（初期値）： 裏向きになっても要素が表示されます。
  • hidden： 裏向きになった要素は非表示になります。

使用例

以下の例では、親要素に perspective を設定し、子要素を rotateY(180deg) と rotateX(45deg) で回転させています。子要素には 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>

ポイント解説

perspectiveとの組み合わせ

親要素の .demo1 に設定された perspective: 80px; により、3D空間での奥行きが表現されます。値が小さいほど遠近感が強調され、回転がより立体的に見えます。

hiddenを指定した場合

もし backface-visibility: hidden; を指定すると、要素が裏向きになった瞬間に非表示になるため、表面と裏面で異なるコンテンツを持つ「めくれるカード」のようなUIを簡単に作成できます。

このように backface-visibility プロパティを使いこなすことで、3D変換を伴うインタラクティブなデザインを柔軟に実装できます。

  1. CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

    Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方

  2. CSSでcontenteditable要素の境界線（枠線）を削除する方法

    HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。コード例<!DOCTYPE html> <html> <head> <st