CSS Property backface-visibility

The backface-visibility property is relate to 3D transforms.

With 3D transforms, we can rotate an element so the "back" of an element faces the screen.

For instance, the following code would flip an element away from the screen:

.flip {
  transform: rotateY(180deg);
}

We can use backface-visibility to control the backface visibility.

Summary

Initial value: visible
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.backfaceVisibility="hidden"
Animatable: no

CSS Syntax

backface-visibility: visible|hidden;

Property Values

visible: Default value. The backside is visible
hidden: The backside is not visible

Browser compatibility


`backface-visibility`	36.0 (12.0 -webkit-)	10.0	16.0 (10.0 -moz-)	4.0 -webkit-	23.0 (15.0 -webkit-)

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from   www.  j  a  va 2  s. co  m-->
    position: relative;
    height: 60px;
    width: 60px;
    background-color: red;
    -webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
}

#div1 {
    -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

#div2 {
    -webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */
    backface-visibility: visible;
}
</style>
</head>
<body>

    <div id="div1">DIV 1</div>
    <div id="div2">DIV 2</div>

</body>
</html>

Click to view the demo