Post
Ask Question

backface-visiblity property in CSS3

backface-visibility property in CSS3

 
backface-visibility property in CSS3, it is used to determine that the backside should be visible or not. This property is useful when the element is rotated and we do not want to see the backside of the element.
 
Ex:
  1. <html>  
  2.   
  3.    <head>  
  4.       <style>  
  5.       p   
  6.       {  
  7.          position: relative;  
  8.          height: 50px;  
  9.          width: 50px;  
  10.          background-color: Pink;  
  11.          transform: rotateX(180deg);  
  12.          -moz-transform: rotatex(70deg);  
  13.          /* Mozilla Firefox */  
  14.          -webkit-transform: rotateX(180deg);  
  15.          /* Google Chrome and Safari */  
  16.       }  
  17.  
  18.       #p1   
  19.       {  
  20.          -webkit-backface-visibility: hidden;  
  21.          -moz-backface-visibility: hidden;  
  22.       }  
  23.  
  24.       #p2   
  25.       {  
  26.          -webkit-backface-visibility: visible;  
  27.          -moz-backface-visibility: visible;  
  28.       }  
  29.       </style>  
  30.    </head>  
  31.   
  32.    <body>  
  33.       <p id="p1">Mahak</p>  
  34.       <p id="p2">Garg</p>  
  35.    </body>  
  36.   
  37. </html> 
1.png
Next Recommended Reading perspective-origin property of CSS3