CSS backface-visibility Property

The backface-visibility property in CSS determines whether the back face of an element is visible when it is rotated. It is commonly used in 3D transformations where elements can be flipped to reveal their back sides.

Syntax of backface-visibility

</>

Copy

backface-visibility: visible | hidden | initial | inherit;

Values

Value	Description
`visible`	The back face of the element is visible when rotated. This is the default value.
`hidden`	The back face of the element is hidden when rotated.
`initial`	Sets the property to its default value (`visible`).
`inherit`	Inherits the value from the parent element.

Default Value

visible

Examples for backface-visibility

Using the CSS backface-visibility Property

The following examples demonstrate how the backface-visibility property can be used to hide or display the back face of an element during a 3D rotation.

</>

Copy

/* Make the back face visible */
.element {
  backface-visibility: visible;
}

/* Hide the back face */
.element {
  backface-visibility: hidden;
}

/* Inherit the backface visibility from the parent element */
.element {
  backface-visibility: inherit;
}

Example for Applying backface-visibility

The following example demonstrates a card-flip effect using backface-visibility. The back face is hidden when the card is flipped.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .card-container {
    perspective: 1000px;
    width: 200px;
    height: 300px;
  }

  .card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    position: relative;
  }

  .card:hover {
    transform: rotateY(180deg);
  }

  .card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
  }

  .card-front {
    background-color: #007BFF;
  }

  .card-back {
    background-color: #FF5722;
    transform: rotateY(180deg);
  }
</style>
</head>
<body>

<h1>CSS backface-visibility Example</h1>

<div class="card-container">
  <div class="card">
    <div class="card-front">Front Side</div>
    <div class="card-back">Back Side</div>
  </div>
</div>

</body>
</html>

Explanation of `backface-visibility` Property

The backface-visibility property determines whether the back side of an element is visible when it is rotated in 3D space.
In this example, the .card-front and .card-back elements represent the front and back sides of a card, respectively, and both use backface-visibility: hidden;.
The backface-visibility: hidden; ensures that the back of an element is not visible when the element is facing away from the viewer.
The .card element has a transform-style: preserve-3d; property, which allows the child elements to maintain their 3D transformations.
When the .card element is hovered over, the transform: rotateY(180deg); rotates the card 180 degrees along the Y-axis, flipping it to reveal the back side.
Because of backface-visibility: hidden;, the front side of the card is hidden when the card is flipped, and only the back side is visible.
The result is a smooth 3D card flip effect, where the front side is shown initially, and the back side becomes visible on hover.

Browser Support

The backface-visibility property is supported in most modern browsers. Below is a compatibility table:

Browser	Version
Chrome	36
Edge	12
Firefox	16
Safari	15.4
Opera	23

TutorialKart

CSS backface-visibility Property