CSS backface-visibility Property

What You’ll Learn

The backface-visibility property controls whether the reverse side of an element is visible during 3D rotations. It is essential for clean flip-card animations and polished 3D transform effects.

Definition and Usage

The backface-visibility CSS property defines whether the back face of an element should be visible when the element is turned away from the viewer in 3D space.

When you rotate an element with rotateY(180deg) or rotateX(180deg), the browser can render both the front and back sides of that element. For flip cards, setting backface-visibility: hidden; prevents the reverse side from showing through during the animation.

📝 Syntax

Set backface-visibility with one of two keyword values:

selector {
  backface-visibility: visible | hidden;
}

Basic Example

.card-front,
.card-back {
  backface-visibility: hidden;
}

Syntax Rules

• The property accepts only the keywords visible and hidden.
• The initial value is visible.
• It is most useful with 3D transforms such as rotateX() and rotateY().
• Flip-card setups usually combine it with transform-style: preserve-3d and perspective.
• The back face is pre-rotated, often with transform: rotateY(180deg); on the back side.

Default Value

The initial value of backface-visibility is visible. That means the back face of an element can appear when it is rotated in 3D space unless you explicitly hide it.

💎 Property Values

backface-visibility has only two keyword values.

Common 3D Setup for Flip Cards

backface-visibility is usually part of a small 3D transform pattern:

• perspective on the parent — adds depth to the rotation.
• transform-style: preserve-3d on the inner wrapper — keeps child faces in 3D space.
• Absolute front and back faces — two layers stacked in the same box.
• backface-visibility: hidden on both faces — hides the reverse side during the flip.
• Back face rotation — usually transform: rotateY(180deg); on the back content.

visible vs hidden

Examples Gallery

Try backface-visibility with hover flip cards, visible vs hidden comparisons, styled cards, and vertical flips.

<style>
  .card { perspective: 1000px; }
  .card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }
  .card:hover .card-inner { transform: rotateY(180deg); }
  .card-front,
  .card-back { backface-visibility: hidden; }
  .card-back { transform: rotateY(180deg); }
</style>

.clean-flip { backface-visibility: hidden; }
.default-flip { backface-visibility: visible; }

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.tile:hover .tile-inner {
  transform: rotateX(180deg);
}

.tile-back {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

💡 Best Practices