Although already supported by Webkit browsers (Safari and Chrome) and Firefox 10+, CSS3 3D transforms won't be supported in IE until version 10. However, despite a lack of support in 'desktop' browsers, thanks to their origin in Webkit, they are well supported in Android (v3 onwards) and iOS (all versions).
Suffice to say, from this point on, you'll be best off checking your results in a Webkit based browser such as Chrome or Safari (unless, of course, you're reading this at a time when your browser of choice does support 3D transformations).
Now, we're just going to dabble in 3D transformations here. They're a vast subject and the possibilities are virtually infinite. I imagine by the time they are supported widely, most of us will reach for them to create Carousel effects, rather than relying on JavaScript solutions from the likes of jQuery. However, until then, let's just open the lid and take a peek at what's possible.
Let's imagine we're making a simple quiz for the AND THE WINNER ISN'T website. It will be composed of images of movie posters and you have to guess whether they are considered 'Hot or Not' by the world's most respected film critic (yep, that's me). Hovering over the images (or tapping on a touch screen) will reveal the answer.
Here's the relevant section of markup; note that I've omitted the repetition of the markup for each image as they follow exactly the same format:
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>And now here's the CSS. Note, as Webkit is the browser with the greatest support for 3D transformations, the declarations here all use that specific vendor prefix. As ever, when implementing in the real world, vendor-prefixes are your friend.
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
padding: 15%;
}With that in place, hovering over the relevant image makes the poster flip and the simple HOT or NOT answer is revealed.
Let's go through the code to understand how this effect is achieved.
The first important point is to set the perspective on the parent element. This activates 3D space:
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 200;
float: left;
margin-right: 2%;
}The larger this perspective value, the greater the virtual depth of 3D space from your viewing point. Therefore, for a subtler 3D effect, increase the value. For a more dramatic effect, decrease it.
The next noteworthy point:
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}The first perspective declaration added to the .Qcontainer class only applies to the first direct descendent (the div with a class of .film in this example). Therefore, to pass on the parent's perspective we use the preserve-3d value.
Now, we'll add a rule to flip the .film div when the .Qcontainer section is hovered over:
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);
}The next rule deals with hiding the opposite side of the poster when it's flipped:
.face {
position: absolute;
-webkit-backface-visibility: hidden;
}The absolute positioning on the .face is necessary to position it on top of the .back DIV:
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);
background: #3b3b3b;
background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
padding: 15%;
}Finally, we also add a simple rotateY on the .back DIV. Without this, the .back DIV effectively shows through the front.
And that's all there is to it. Now, hovering over any of the posters flips them in a rather dramatic fashion.
However, for any non-Webkit browsers the page functionality is decidedly lame:
Well, we can provide an acceptable fallback for non-Webkit browsers with a little CSS of old:
.front {
z-index: 5;
}
.Qcontainer:hover .front {
z-index: 0;
}First, we set a z-index of 5 on the .front DIV so that it sits above the .back DIV by default:
.front {
z-index: 5;
}Now, when the .Qcontainer section is hovered over, we'll set the z-index to 0 so it once more sits behind the .back DIV:
.Qcontainer:hover .front {
z-index: 0;
}Now we get a functional question and answer functionality in non-3D transform capable browsers, sans the fancy 3D effect.
In my experience, at present, many of the 3D transforms don't play happily with percentage sizes (for example, amending the viewport width with the prior example makes things misbehave severely). So there's often quite a bit of tweaking to be done to make them play happily within a responsive layout. Furthermore, as support is currently so limited, 3D transformations seldom offer the most robust solution when you're building a cross-browser site. So for now, I still err towards jQuery or similar for this kind of functionality.
The possibilities of CSS 3D transforms are, however, extremely promising and when browser support is extended, they offer the opportunity to move many of the fancy effects we currently rely on JavaScript for, to be moved within our stylesheets.
Note
Read about the latest W3C developments on CSS 3D Transforms at http://dev.w3.org/csswg/css3-3d-transforms/