Tutorialspoint.dev

CSS | backface-visibility Property

This 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:

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:



    <!DOCTYPE html>
    <html>
        <head>
            <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:

    <!DOCTYPE html>
    <html>
        <head>
            <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:

    <!DOCTYPE html>
    <html>
        <head>
            <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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter