CSS backface-visibility Property

The backface-visibility property determines whether or not an element should be visible when its back side is facing the user during a 3D rotation.

selector { backface-visibility: visible | hidden; }
visible The back side of the element remains visible to the user, showing a mirrored version of the front.
hidden The back side of the element is not drawn, making it invisible when its rear faces the screen.

Code Examples

A basic example showing a single element that disappears when rotated 180 degrees because its backface is hidden.

<div style="perspective: 400px;">
  <div style="width: 150px; height: 150px; background: #ff0000; backface-visibility: hidden; transition: transform 1s; transform-style: preserve-3d;" onmouseover="this.style.transform='rotateY(180deg)'" onmouseout="this.style.transform='rotateY(0deg)'">
    Hover to flip me. I will vanish when the back faces you.
  </div>
</div>

An advanced card-flip component using two separate faces and a JavaScript function to toggle the rotation state.

<style>
.scene { width: 200px; height: 260px; perspective: 600px; }
.card { width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer; }
.face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 8px; color: #ffffff; font-family: sans-serif; }
.front { background: #222222; }
.back { background: #007bff; transform: rotateY(180deg); }
.flipped { transform: rotateY(180deg); }
</style>
<div class="scene">
  <div id="mainCard" class="card" onclick="flipCard()">
    <div class="face front">The Front</div>
    <div class="face back">The Back</div>
  </div>
</div>
<script>
function flipCard() {
  const card = document.getElementById("mainCard");
  card.classList.toggle("flipped");
  // Adam Khoury Tip: JS handles the state, CSS handles the beauty.
  console.log("Card flip state toggled at: " + new Date().toLocaleTimeString());
}
</script>

Pro Tip

You can use backface-visibility: hidden; as a performance hack. In many browsers, applying this property triggers the creation of a new composite layer on the GPU. This can help smooth out animations and prevent "flickering" during transitions on mobile devices, even if you are not actually performing a 3D rotation.

Deep Dive

Think of an HTML element like a thin sheet of glass with a sticker on the front. By default, if you spin that glass 180 degrees, you still see the sticker, just mirrored from behind. That is the "visible" state. When you set this property to "hidden", it is like making the back of that sticker completely opaque and the same color as the void. The moment the element rotates enough that its back side faces the camera, the browser stops rendering it. This property is part of the 3D transform toolset and is essential for building things like double-sided cards where you want the front and back to be two distinct elements occupying the same physical space without one bleeding through the other.

Best Practices

When creating a flipping card effect, apply backface-visibility: hidden; to both the front and back face elements. Place them inside a parent container that has transform-style: preserve-3d; enabled. This ensures that only the side currently facing the user is rendered, preventing visual glitches or overlapping graphics. Also, ensure your parent container has a perspective property set, otherwise the 3D rotation will look flat and the visibility toggle might look like a simple scale change.

Common Pitfalls

A common mistake is expecting this property to work on 2D rotations using rotate(). It only has an effect when you use 3D transform functions like rotateY() or rotateX(). Another frequent issue is forgetting that even when the backface is hidden, the element still exists in the DOM and can still take up space or capture pointer events if you are not careful with your layer stacking or z-index.

Accessibility

If you are hiding content via a flip animation, make sure that the content on the back side is accessible to screen readers when it becomes visible. Use ARIA attributes or toggle the visibility: hidden; property on the specific faces so that a keyboard user or screen reader does not accidentally focus on or read content that is visually hidden behind the current face.

Dev Data Table: backface-visibility property

default visible
animatable no
inherited no
experimental no
year_intro 2011
year_standard 2015
js_syntax_1 document.getElementById("box").style.backfaceVisibility = "hidden";
js_syntax_2 document.getElementById("box").style.setProperty("backface-visibility", "hidden");
js_note When using the style object property, remember that CSS properties with hyphens are accessed using camelCase like backfaceVisibility.
browsers { "Chrome": 36, "Edge": 12, "Firefox": 16, "Safari": 15.4, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 15.4, "Samsung Internet": 3, "Opera Mobile": 23 }
results render here...