Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | backface-visibility Property

  • Last Updated : 01 Sep, 2021

The backface-visibility Property decides whether the back face of an element might be visible or not to the user. It is a mirror image of the front face that is being displayed as a back face of an element to the user. It is useful when an element is rotated then it decides whether the back face of an element is visible or not.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

backface-visibility: visible|hidden|initial|inherit;

Property:

visible: It is the default value. The back face of an element is visible when facing the user.



  • Syntax:
    backface-visibility:visible;:
  • Example:

    html




    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS | backface-visibility Property
            </title>
            <style>
                div {
                    position: relative;
                    height: 190px;
                    width: 190px;
                    FONT-SIZE:35PX;
                    COLOR:WHITE;
                    text-align:center;
                    padding:20px;
                    background-color: GREEN;
                    -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                }
                  
                #GEEKS {
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
            </style>
        </head>
        <body>
            <center>
            <h1 style="color:green;">GeeksForGeeks</h1>
            <h2 style="color:green;">
                backface-visibility:visible;
            </h2>
            <div id="Gfg">Geeks For Geeks</div>
            </center>
        </body>
    </html>                    

  • Output:

hidden: This property values specifies the back face of an element is hidden when facing the user.

  • Syntax:
    backface-visibility:hidden;
  • Example:

    html




    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS | backface-visibility Property
            </title>
            <style>
                div {
                    position: relative;
                    height: 190px;
                    width: 190px;
                    FONT-SIZE:35PX;
                    COLOR:WHITE;
                    text-align:center;
                    padding:20px;
                    background-color: GREEN;
                    -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                }
                  
                #GEEKS {
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
            </style>
        </head>
        <body>
            <center>
            <h1 style="color:green;">GeeksForgeeks</h1>
            <h2 style="color:green;">
               backface-visibility:hidden;
            </h2>
            <div id="GEEKS">Geeks For Geeks</div>
            </center>
        </body>
    </html>                    

  • Output:

initial: It sets the property to its default value.

  • Syntax:
    backface-visibility:initial;
  • Example:

    html




    <!DOCTYPE html>
    <html>
        <head>
            <title>
                CSS | backface-visibility Property
            </title>
            <style>
                div {
                    position: relative;
                    height: 190px;
                    width: 190px;
                    FONT-SIZE:35PX;
                    COLOR:WHITE;
                    text-align:center;
                    padding:20px;
                    background-color: GREEN;
                    -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                }
                  
                #GEEKS {
                    -webkit-backface-visibility: initial; 
                    backface-visibility: initial;
                }
            </style>
        </head>
        <body>
            <center>
            <h1 style="color:green;">GeeksForgeeks</h1>
            <h2 style="color:green;">
              backface-visibility:initial;
            </h2>
            <div id="GEEKS">Geeks For Geeks</div>
            </center>
        </body>
    </html>                    

  • Output:

Supported browser: The browser supported by backface-visibility Propertyare listed below:

  • Google Chrome 36.0, 12.0 -webki-
  • Internet Explorer 10.0
  • Firefox 16.0, 10.0 -moz-
  • Opera 23.0, 15 -webkit
  • Safari 9.0, 4.0 -webkit



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!