CSS backface-visibility Property

CSS backface-visibility Property

The backface-visibility property in CSS controls whether the back face of an element is visible when it is turned away from the viewer. This is often used with 3D transformations like rotateY or rotateX.

1. Syntax

selector {
  backface-visibility: value;
}

2. Accepted Values

Value	Description
visible (default)	The back face of the element is visible when rotated or flipped.
hidden	The back face of the element is not visible when rotated or flipped.

3. Example – Using backface-visibility: visible (Default)

.box {
  width: 200px;
  height: 200px;
  background: lightblue;
  transform: rotateY(180deg);
  backface-visibility: visible;
}

✅ The back face is visible when the element is rotated.

4. Example – Using backface-visibility: hidden

.box {
  width: 200px;
  height: 200px;
  background: lightblue;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

✅ The back face is hidden when the element is rotated.

5. Best Practices

✔ Use backface-visibility: hidden for flip animations to avoid showing the back face.
✔ Combine with transform: rotate to create interactive 3D effects or flip cards.