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

<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> 

.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; 
}

Browser Support

Desktop
10	12	36	16	23	15.4
Tablets / Mobile
37	36	16	24	15.4	3.0

Last updated by CSSPortal on: 20th October 2019