transform: rotateY(180deg);
The element is effectively reversed and the child elements show through:
Sometimes you’ll want that effect. But sometimes you won’t. Let’s create a playing card which can be flipped over on hover/focus using a 3D transformation in conjunction with a transition. Our HTML code defines the front and back of the ace of hearts:
<div class="card">
<div class="front"><span>A♥</span> ♥ <span>A♥</span></div>
<div class="back"></div>
</div>
In the starting state, the front is rotated 180 degrees. (Actually, I’ve used -179.9 degrees to ensure it always rotates the same way since browsers will use the shortest path):
div.card div.back
{
transform: perspective(400px) rotateY(0deg);
}
div.front
{
transform: perspective(400px) rotateY(-179.9deg);
}
On hover/focus, both sides are rotated clockwise around the y-axis with perspective to give the illusion of a flipping card:
div.card:hover div.back, div.card:focus div.back
{
transform: perspective(400px) rotateY(179.9deg);
}
div.card:hover div.front, div.card:focus div.front
{
transform: perspective(400px) rotateY(0deg);
}
Unfortunately, it doesn’t work: View the first 3D card flipping page…
The back on the card will always appear above the front because that’s the way it’s defined in the HTML. No amount of z-index manipulation shenanigans will help you.
Fortunately, there’s a simple solution. The backface-visibility
(and -webkit-backface-visibility
) can be assigned a value of:
- visible — the default; the element is reversed, or
- hidden — an element is hidden when it is reversed
div.card div
{
backface-visibility: hidden;
}
Success! View the second 3D card flipping page…
If you reduce the animation speed (by increasing the time), you’d discover that div.front becomes visible after it has rotated by 90 degrees and div.back becomes invisible at the same time.
When combined with transitions and animations, 2D and 3D transformations become incredibly powerful and effective. It’s too easy to go overboard with migraine-inducing effects — sometimes, less is more — but the only limit is your imagination. Please post URLs to any interesting demonstrations you create.
Frequently Asked Questions (FAQs) about CSS3 Transformations and 3D Backface Visibility
What is the purpose of the backface-visibility property in CSS3?
The backface-visibility property in CSS3 is used to determine whether the back face of an element is visible when it’s not facing the viewer. This property is particularly useful when dealing with 3D transformations. By default, the back face of an element is visible, but by setting the backface-visibility property to ‘hidden’, you can hide the back face of an element when it’s turned away from the viewer.
How does the backface-visibility property work with 3D transformations?
When you apply a 3D transformation to an element, it can rotate in such a way that the back face of the element becomes visible. By default, this back face is a mirror image of the front face. However, if you set the backface-visibility property to ‘hidden’, the back face will be invisible, and the viewer will see through to the elements behind it. This can create a more realistic 3D effect.
Can I use the backface-visibility property with 2D transformations?
The backface-visibility property is specifically designed for use with 3D transformations. When you apply a 2D transformation to an element, it doesn’t have a back face that can become visible, so the backface-visibility property has no effect.
What are the possible values for the backface-visibility property?
The backface-visibility property can take two values: ‘visible’ and ‘hidden’. The ‘visible’ value means that the back face of an element is visible when it’s not facing the viewer. The ‘hidden’ value means that the back face is not visible when it’s not facing the viewer.
How does the backface-visibility property affect the z-index of an element?
The backface-visibility property doesn’t directly affect the z-index of an element. However, it can affect the visual stacking order of elements when used in conjunction with 3D transformations. If the back face of an element is hidden, it won’t obscure elements that are behind it in the stacking order.
Is the backface-visibility property supported in all browsers?
The backface-visibility property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s not supported in Internet Explorer 9 or earlier versions.
Can I use the backface-visibility property with pseudo-elements?
Yes, you can use the backface-visibility property with pseudo-elements. This can be useful for creating complex 3D effects.
How can I use the backface-visibility property to create a flip card effect?
You can create a flip card effect by applying a 3D rotation to an element and setting the backface-visibility property to ‘hidden’. This will make the front face of the element disappear as it rotates away from the viewer, and the back face will appear as it rotates towards the viewer.
Can I animate the backface-visibility property?
The backface-visibility property is not animatable. However, you can create animation effects by animating other properties, such as transform, and using backface-visibility to control the visibility of the back face.
What happens if I set the backface-visibility property to ‘hidden’ on an element without a 3D transformation?
If you set the backface-visibility property to ‘hidden’ on an element without a 3D transformation, it won’t have any visible effect. The back face of an element is only visible when the element is rotated in 3D space.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.