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