CSS’s backface-visibility property is one that you might not have heard of before. The property is used to define the visibility of the back side of HTML elements that have been animated using CSS. If the element that you apply backface-visibility to isn’t animated, then there’s really no point in using the property at all.
Using the backface-visibility property is fairly straightforward. It only takes a few values. Visible, which is the default value, makes the backface of the animated element visible during animations. If you want the backface of the animated element to be hidden from view, then you can use the hidden value. The other two values that the property takes are initial, which sets the property value to the default value, and inherit, which will inherit the value of the property from the value of its parent element.
The syntax of the property is very simple. To see how it might look, check out the small snippet below:
.animated-object{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
As you can see, we used the -webkit- vendor prefix along with the standard property name because the backface-visibility property isn’t universally supported on all browsers yet. In fact, the only browser it will work on without the use of a vendor prefix is Internet Explorer.
To see this CSS property in action, check out this tutorial from The Code Player, which is a perfect example of how to use the property in a fun context. The tutorial creates the effect of an unidentified flying object that’s orbiting a moon or a planetary object. The UFO circles all around the bigger object, and the author of tutorial applied the backface-visibility property to certain selectors that help make up the UFO to give it its flat, round look by hiding the backface of these particular selectors.
