Open In App
Related Articles

CSS backface-visibility Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

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.
  • hidden: This property values specifies the back face of an element is hidden when facing the user.
  • initial: It sets the property to its default value.

Example: In this example, we are using the backface-visibility: visible property.

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:

 

Example: In this example, we are using backface-visibility: hidden property.

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:

 

Example: In this example, we are using backface-visibility: initial property.

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 Property are listed below:

  • Google Chrome 36.0
  • Edge 12.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 23.0
  • Safari 15.4


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads