CSS properties - backface-visibility

revision:

backface-visibility property

The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed.

This property is useful when an element is rotated. It lets you choose if the user should see the back face or not.

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

Property values

visible : default value. The backside is visible

hidden : the backside is not visible.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.backfaceVisibility="hidden"

example: backface-visibility property

This example shows the back face of two div elements.

The first div element has "backface-visibility: hidden", and the back face of the div element is invisible:

The second div element has "backface-visibility: visible", and the back face of the div element shows a mirror image of the front face:

DIV 1
DIV 2
code: 
                    <div>
                        <div class="div" id="div1">DIV 1</div>
                        <div class="div" id="div2">DIV 2</div>
                    </div>
                    <style>
                        .div{position: relative; height: 6vw; width: 6vw; background-color: red; transform: rotateY(180deg);}
                        #div1 {-webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden;}
                        #div2 {-webkit-backface-visibility: hidden; /* Safari */backface-visibility: visible; }                     </style>