CSS backface-visibility

The CSS backface-visibility property specifies whether the back face of an element should be visible when facing the user or not. This property is particularly useful when working with 3D transforms and animations.

When the backface-visibility property is set to visible, the back face of the element is visible, even when the element has been rotated to show its back side. On the other hand, when the property is set to hidden, the back face is not visible, and only the front face is displayed.

Let's take a look at an example to demonstrate how the backface-visibility property works:

<div style="transform-style: preserve-3d;">
    <div style="transform: rotateY(180deg); backface-visibility: visible; 
    display: inline-block; width: 100px; height: 100px; background-color: red;">Front</div>
      </div>

In this example, we have a div element that has been rotated along the Y-axis using the rotateY transform function. The backface-visibility property is set to visible, so even when the element is rotated to show its back side, the back face is visible.

Now, let's see what happens when we change the backface-visibility property to hidden:

In this new example, the back face of the element is not visible because the backface-visibility property is set to hidden.

Remember, the backface-visibility property only has an effect when working with 3D transforms. It allows you to control whether the back face of an element is visible or not when rotated in 3D space.