CSS backface-visibility Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The backface-visibility property in CSS controls whether the back side of an element is visible when it is rotated in 3D space. In essence, it determines if the reverse face of an element - what would be seen if the element were turned around - can be seen by the viewer. This property becomes particularly important when using 3D transformations, such as with transform, where elements can be rotated along the X, Y, or Z axis. Without careful control of backface visibility, elements might appear to display mirrored or flipped content in ways that break visual design or user expectations.

This property is commonly used when creating card-flip animations, where one side of a card is shown at a time. By setting backface-visibility to hidden, the reverse side of the element will not be displayed when rotated, giving the appearance of a clean flip between the front and back sides. This ensures that any text or graphics on the back of the element remain unseen until the element rotates back into view. On the other hand, setting it to visible allows both sides to be shown, which might be useful for more complex visual effects or for elements that are intentionally mirrored in 3D space.

While backface-visibility affects the visual outcome of 3D transformations, it interacts closely with other properties that define perspective and 3D rendering, such as perspective and transform-style. Properly combining these properties allows developers to create realistic depth and flipping effects in web layouts, ensuring that elements rotate and hide as intended. Ignoring backface visibility can lead to unintuitive visual results, such as seeing the backside of a card through another element, which is why understanding and applying this property is essential for 3D web design.

Definition

Initial value: visible
Applies to: Transformable elements
Inherited: No
Computed value: Same as specified value
Animatable: No
JavaScript syntax: object.style.backfaceVisibility

Interactive Demo

backface-visibility: visible;

backface-visibility: hidden;

front

back

right

left

top

bottom

Syntax

backface-visibility: visible | hidden

Values

visibleThe back face of an element is a transparent background, displaying a mirror image of the front face when the back face is observable.
hiddenThere are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). In this case, the property should be set to hidden to make the back face of the element opaque.

Example

HTML

<div class='scene'>

  <div class='card' tabindex='0'>

    <div class='card__face card__face--front'>

      <h2>Front</h2>

      <p>Click or hover to flip</p>

    </div>

    <div class='card__face card__face--back'>

      <h2>Back</h2>

      <p>This is the back face</p>

    </div>

  </div>

</div>

CSS

.scene {
  width: 320px;
  height: 200px;
  perspective: 1000px;
  margin: 40px auto;
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  cursor: pointer;
  border-radius: 10px;
}
.card:focus,
.card:hover {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  color: #222;
}
.card__face--front {
  background: linear-gradient(135deg, #ffffff 0%, #e0f7fa 100%);
}
.card__face--back {
  background: linear-gradient(135deg, #fff3e0 0%, #ffccbc 100%);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.card__face h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}
.card__face p {
  margin: 0;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS backface-visibility property. Hover over a browser icon to see the version that first introduced support for this CSS property.