Backface-visibility

CSS provides many opportunities to implement a wide variety of web page designs. In this topic, we will cover a property that determines whether the backside of an element is visible or not when the front side is turned away from the screen.

Syntax

The backface-visibility property controls whether to show or hide the backside of an element to the users. In this case, the back face of an element is basically a mirror reflection of the displayed front face.

This property is useful if you plan to rotate the element in the 3D space. For example, you can use it to make flip cards, or you can rotate any element to get a more creative page design. In a usual situation with 2D transformations, backface-visibility does not affect the display of the element.

You can set the following values for the backface-visibility property:

• visible is used to make the backside of the element visible and mirrored through the front surface of the element. This is the default value.

• hidden makes the backside invisible behind the front surface of the element.

• inherit will allow you to inherit the value of the parent element.

• initial sets the property to its default value;

• unset is basically a combination of the initial and inherit values. The unset keyword sets the property value as inherit if the property is inherited from the parent element; otherwise, the value is set as initial.

Examples of property usage

To better understand this property, let's look at an example. Suppose that some HTML document body has a <p> element like this:

<p>backface-visibility</p>

Let's try to make the back side of the <p> element visible when the cursor is pointed at it:

p {
  background: #B4A7CA;
  width: 130px;
  height: 100px;
}

p:hover {
  backface-visibility: visible;
  transform: rotateY(180deg); 
}

This is what the element will look like when you hover the mouse cursor over it:

When you put the mouse cursor over an item, its backside is shown. It looks like a mirrored front side.

If you change the line backface-visibility: visible; to backface-visibility: hidden;, then when you hover your mouse over the element, the backside will no longer be displayed:

Let's look at another example. Suppose you want to make a cube with semi-transparent edges to make the site design more interesting.

<div class="container">
  <div class="cube">
    <div class="face" id="front"></div>
    <div class="face" id="back"></div>
    <div class="face" id="right"></div>
    <div class="face" id="left"></div>
    <div class="face" id="top"></div>
    <div class="face" id="bottom"></div>
  </div>
</div> 

.container {
  width: 150px;
  height: 150px;
  margin: auto;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
}

#front {
  background: rgba(255, 225, 225, 0.5);
  transform: translateZ(50px);
}

#back {
  background: rgba(0, 255, 225, 0.5);
  transform: rotateY(180deg) translateZ(50px);
}

#right {
  background: rgba(225, 0, 225, 0.5);
  transform: rotateY(90deg) translateZ(50px);
}

#left {
  background: rgba(225, 0, 225, 0.5);
  transform: rotateY(-90deg) translateZ(50px);
}

#top {
  background: rgba(225, 225, 0, 0.5);
  transform: rotateX(90deg) translateZ(50px);
}

#bottom {
  background: rgba(225, 225, 0, 0.5);
  transform: rotateX(-90deg) translateZ(50px);
}
 

This is what we got:

Since visible is the default value of the backface-visibility property, we can see all the back sides of the elements. Now let's try to hide the backside of all the cube elements. To do this, we need to add the backface-visibility: hidden; style to the element with the face class. Adding the below code in addition to the above CSS code,

.face {
    backface-visibility: hidden;
} 

As soon as you add the backface-visibility: hidden; to the face class, the backside of the cube element will be hidden as you can see in the output image below:

If you would like more examples of the backface-visibility property, you can try running the code from examples on codepen.io and experiment with it.

Browser support

All modern browsers support this property, but this does not extend to older browser versions. If you want the backside of your items to be displayed in earlier versions of Chrome, Safari, Android, or Opera, duplicate the code using the -webkit- prefix. Since early versions of Mozilla Firefox also do not support this feature, you should use the -moz- prefix.

p:hover {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}

Conclusion

Now that you know when and how to use the backface-visibility property, all possible values of this property, and can even do it in older browsers, let's test your knowledge and skill!