Skip to main content

CSS3 3D Transformations: backface-visibility

By Craig Buckler



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

In my previous article we transformed various elements in three-dimensional space, e.g. rotating around the y-axis:

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>

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);

	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

We can therefore apply this to our front and back elements:

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.

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.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs