backface-visibility Archives

The CSS backface-visibility property specifies 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 CSS property is useful when an element is rotated).

Demo:

Hover over the square to see the effect:

backface-visibility: visible;

Hello!

backface-visibility: hidden;

Hello!

Syntax:

backface-visibility: visible|hidden;

visible (default) – the backside is visible.

hidden – the backside is not visible.

Example:

<!doctype html>
<html>
<head>
<style>
.one {
   width:100px;
   height: 100px;
   background-color: #2a9d8f;
   margin:10px;
   text-align: center;
   font-size: 30px;
   backface-visibility: visible;
   transform: rotateY(180deg);
    }
</style>
</head>

<body>
<div class="one">Hello!</div>
</body>
</html>

Output:

Hello!

Enjoy coding!