Creating a CSS3D hovering state with fallback for older browsers

HTML5 & CSS3 are a big sugar rush in the front-end community currently, you can see those nice CSS3 buttons popping everywhere around the web. For one project I am working on I wanted to use a nice 3d flip effect like this one.

Unfortunately that kind of effect is currently only achievable with Safari and Chrome, so to make this thing work I needed a normal hover behavior for other browsers, and that is what I wanted to show you how to do here.

Setup

I’m not going to be talking about how to do the flip effect, there is already several posts about that. What I will show you is how to use it intelligently and make it fallback.

So, why this effect is not working on Firefox you might ask? Firefox had css3d since version 3.5 after all, well webkit implemented a new property, *currently a w3c draft* called backface-visibility. This nifty property allow you to hide the back face of an element. I guess you can imagine and this can come handy in a flip effect. This is something that IE9 and Firefox does not currently support.

Creating a version compatible with other browsers

For achieving this, we will need to use 2 absolute positioned elements, and show and hide them with display:none on the hover state, pretty easy in fact. The tricky part is that we also need to override this behavior on webkit based browsers(and maybe other browsers one day). For this, we will need to use a nice css feature called media queries.

Media queries

Yup, you can do conditionals statement in CSS. This is really handy if you want to implement edgy stuff on browser that supports it, and still give a nice level of support for older browsers (it’s, of course, useful for other very important things). For our little project we will use this media query.

@media screen and (-webkit-min-device-pixel-ratio:0) { }

So why use -webkit-min-device-pixel-ratio? Well because this property has been added at the same time that backface-visibility. So yes, this is a hack! But it works, I would like to have something cleaner but this will do for now, we will also need use something similar when firefox will implement backface-visibility.

So what our CSS code looks like?

.containerCard {
	height:194px;
	position:relative;
	background:#fff;
	width:144px;
}
	.containerCard .element{
		height:194px;
		position:absolute;
		top:0; left:0;
		background:#fff;
		width:144px;
	}
	.containerCard .elementB{
		display:none;
	}	
 
		.containerCard:hover .elementA {
			display:none;
		}
		.containerCard:hover .elementB{
			display:block;
		}
 
 
		@media screen and (-webkit-min-device-pixel-ratio:0) {
 
			.containerCard .elementB{
				-webkit-transform: rotateY(-180deg);
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
 
				/* -- transition is the magic sauce for animation -- */
				transition: all .4s ease-in-out;
				-moz-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
			}	
			.containerCard .elementA{
				-webkit-transform: rotateY(0deg);
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
 
				/* -- transition is the magic sauce for animation -- */
				transition: all .4s ease-in-out;
				-moz-transition: all .4s ease-in-out;
				-webkit-transition: all .4s ease-in-out;
			}
 
				.containerCard:hover .elementA{
					-webkit-transform: rotateY(180deg);
				}
				.containerCard:hover .elementB{
					-webkit-transform: rotateY(0deg);
				}
				.containerCard{
					-webkit-perspective: 600;
				}
		     	.containerCard:hover .elementA{
					display:block;
				}
				.containerCard .elementB{display:block;}		
		}

Download

There we have it! As usual the code can be found on github.

Download the source code