backface-visibility - HTML CSS CSS Property

HTML CSS examples for CSS Property:backface-visibility

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. backface-visibility

Description

The backface-visibility CSS property sets if to show the "back" side of a transformed element.

The following table summarizes the backface-visibility Property.

Item Value
Default value: visible
Applies to:Transformable elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


backface-visibility:      visible | hidden | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
visible back face is visible. Mirror the front face. This is default value.
hidden back face is not visible, hiding the front face.
initial Sets this property to its default value.
inherit take the value of its parent element backface-visibility property.

The example below shows the backface-visibility property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 backface-visibility Property</title>
  <style type="text/css">
.flip-container {<!--   w  ww . j  a v a2 s  . co m-->
    margin: 50px;
    perspective: 1000px;
    display: inline-block;
}
.flip-container:hover .card {
    transform: rotateY(180deg);
}
.card, .front, .back {
    width: 130px;
    height: 195px;
}
.card {
    position: relative;
    transition: 0.5s all;
    transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    transform: rotateY(180deg);
}
.back {
    z-index: 2;
    transform: rotateY(0deg);
}
</style>
 </head>
 <body>
  <p>mouse over to see the backface-visibility property.</p>
  <div class="flip-container">
   <div class="card">
    <img src="https://www.java2s.com/style/demo/Opera.png" class="back" alt="Card Back">
    <img src="https://www.java2s.com/style/demo/Firefox.png" class="front" alt="Card Front">
   </div>
  </div>

 </body>
</html>

Related Tutorials