CSS backface-visibility Property

Description

The backface-visibility property determines whether to show the back of an element or not. As a rule, the reverse side becomes visible when the element is transformed, for example, when it is rotated about a horizontal or vertical axis in three-dimensional space. In a normal situation, the backface-visibility property does not affect the display of an element.

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

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

<figure class="flip"> 

   <div class="card"> 

      <img src="images/sunset.jpg" alt="Sunset" class="card-face front"> 

      <figcaption class="card-face back">Sunset Image on the flip side.</figcaption> 

   </div> 

</figure>

CSS

.flip { 
   perspective: 800px; 
} 
.card { 
   position: relative; 
   width: 250px; 
   height: 273px;
   transition: transform 1s; 
   transform-style: preserve-3d; 
} 
.card:hover { 
   transform: rotateY(180deg); 
} 
.card-face { 
   position: absolute; 
   top: 0; 
   bottom: 0; 
   backface-visibility: hidden;
} 
.card-face.back { 
   padding: 20px; 
   transform: rotateY(180deg); 
   background: #4B846A;
   color: #fff; 
}

Result