Warning: include(/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php): failed to open stream: No such file or directory in /nfs/c06/h04/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42

Warning: include(): Failed opening '/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php' for inclusion (include_path='.:/usr/local/php-5.6.21/share/pear') in /nfs/c06/h04/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42
How To: CSS3 3D Flip Effects - Tom Maitland

Tom Maitland

Creates digital things at Agency. WordPress developer. Web designer. Communicates for UN Youth Australia.

How To: CSS3 3D Flip Effects

02 May 2012

For this site, I built a simple flipping circle that you can try out in a WebKit (Chrome / Safari) or Mozilla browser by hovering over my photo on the right. There are 3 things that happen here:

  1. When your mouse hovers over the widget itself the circle does a quick wiggle so you know it does stuff.
  2. Hovering over the circle activates the effect.
  3. Hovering over the email icon makes it slowly fade in and out (pulsate).

The effects on 1 & 3 are created using keyframes and deserve their own post, so let’s focus on that swish circle for now.

Before I jump into the code, keep in mind that these effects are part of CSS3 which is still a draft standard. That means you and your visitors will need to be using a decent browser like Safari, Chrome or the latest version of Firefox. Like most nice things, they won’t work in IE.

My code below is just raw CSS3, to make it work you’ll need to add in vendor prefixes like -webkit- and -moz-, or you can use this handy piece of JavaScript.

Ok! Lets do this.

Break It Down Now

The idea behind simple CSS3 3D transformations like our one is threefold. You firstly have the change that is being made to the HTML element, the style of that change (3Difying it) then how that change comes to be. Within the CSS, transform sets the change, transform-style sets the type of change, and transition brings it to life.

This transition is then made to two HTML elements simultaneously to create a flip effect, swapping their z-index values during the process, revealing the flip side and visa-versa. It’ll make more sense when you see the code.

HTML Structure

[codesyntax lang=”html4strict”]

<div id="flip">
    <div class="front"></div>
    <div class="back"><a href="#">Some HTML content here...</a></div>
</div>

[/codesyntax]

As you can see the HTML is nothing special, the magic lies with CSS. The wrapper element – #flip – controls the hover or click event and the div tags inside (.front and .back) are the two sides of the flip.

The CSS Foundations

Before we begin animating, we need to use CSS to position the two sides of the circle directly on top of each other. This is some straight forward absolute positioning with layering via z-index.

[codesyntax lang=”css”]

#flip {
	position: absolute;
	z-index: 11;
}
#flip .front,
#flip .back {
	border-radius: 105px;
	background: #333;
	width: 105px;
	height: 105px;
	display: block;
	position: absolute;
	color: #fff;
}
#flip .front {
	z-index: 13;
}
#flip .back {
	z-index: 12;
	background: red;
}

[/codesyntax]

As you can see, the two sides are positioned absolute within the wrapper, div#flip. The top side has a z-index of 13, and the bottom a z-index of 12. The rest is all for looks. Easy? Sweet, onwards and upwards.

Adding the CSS Sparkle

We firstly must create the 3D environment for our flip to take place. That’s done with two new CSS3 attributes on the wrapper div, #flip.

[codesyntax lang=”css”]

#flip {
	perspective: 300px;
	transform-style: preserve-3d;
}

[/codesyntax]

The attributes are fairly self explanatory, transform-style tells the browser this is a 3D transformation taking place, and perspective gives the transition some depth to work with. I pulled 300px out of the air, fiddle with values to suit your purposes. The perspective is what makes it look 3D, providing the skew effects as it flips around.

Next the initial transformation needs to be set for each side of the circle:

[codesyntax lang=”css”]

#flip .front {
	transform: rotateX(0deg);
	backface-visibility: hidden;
}
#flip .back {
	transform: rotateX(-180deg);
	backface-visibility: hidden;
}

[/codesyntax]

The top side is set with it’s original rotation (0deg) and the opposite face of the div.front is hidden so we can show div.back instead. The div.back element is, however, set with a negative rotation of 180deg. This is so it can flip the right way up when it is revealed on hover.

transform is another new CSS3 element and is the main controller for most CSS3 animations, both 2D and 3D. It accepts a range of values, rotate can be set on either the X or Y axis.

Making these two elements flip over on hover is as simple as a few :pseudo classes:

[codesyntax lang=”css”]

#flip:hover .front {
	transform: rotateX(180deg);
}
#flip:hover .back {
	transform: rotateX(0deg);
	z-index: 14;
}

[/codesyntax]

Here the CSS is telling the browser to flip the top div on the X-axis 180 degrees on hover, and simultaneously flip the back div from -180deg to 0deg and change its z-index to 14, lifting it above the top div. Cool huh? It’ll automatically reverse the process when the mouse moves out.

That’s our flipping circle (or square, rectangle, anything really) in a purely functional sense! When you hover over the circle it will show the back side, and change it back to normal on mouse out.

But what about the swish 3D effect? To turn that on you need one last line of CSS code:

[codesyntax lang=”css”]

#flip .front,
#flip .back {
	transition: transform 1s ease-in-out;
}

[/codesyntax]

Transition is perhaps the greatest of the new CSS3 attributes. It its the engine for movement, fade effects, and in this case, our 3D flip. Add this style to the two flipping sides and it will transition their rotation from 0 to 180 degrees, in the 3D environment we created before. You can play with the timing and effect to your taste.

The time is set in seconds, i.e. 0.5s would be 500 milliseconds, 2s would be 2 seconds.

The transition effects available are:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

That’s all there is to it! You’ll now have a stunning CSS3 3D flip that not only looks cool, but is a useful UI tool. Remember it will only work in modern browsers, and you’ll need to add in the vendor prefixes to the CSS code. If you have any questions about the guide feel free to email me and I may be able to help. Here is the complete CSS code for convenience.

Final CSS Styles

[codesyntax lang=”css”]

#flip {
	position: absolute;
	z-index: 11;
	perspective: 300px;
	transform-style: preserve-3d;
}
#flip .front,
#flip .back {
	border-radius: 105px;
	background: #333;
	width: 105px;
	height: 105px;
	display: block;
	position: absolute;
	color: #fff;
	transition: transform 1s ease-in-out;
}
#flip .front {
	transform: rotateX(0deg);
	backface-visibility: hidden;
	z-index: 13;
}
#flip:hover .front {
	transform: rotateX(180deg);
}
#flip .back {
	transform: rotateX(-180deg);
	backface-visibility: hidden;
	z-index: 12;
	background: red;
}
#flip:hover .back {
	transform: rotateX(0deg);
	z-index: 14;
}

[/codesyntax]