Creating a CSS3D hovering state with fallback for older browsers

by Cedric Dugas on July 13, 2011

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.

Back
Back

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



13 comments

Cool expirement!
What about using CSS Animation and switch div background-image during animation?

by Dominic Mercier on July 14, 2011 at 9:14 am. Reply #

That could work,

However on the nice thing this technique allow you is adding text on the backface (my production use case).

Really depend what you are aiming for

by Cedric Dugas on July 14, 2011 at 9:24 am. Reply #

Thank you for sharing this information. The information was very helpful and saved a lot of my time.

by hollister uk on July 18, 2011 at 11:24 pm. Reply #

Thank you my friend ..

by Tamer GÜL on August 17, 2011 at 8:39 pm. Reply #

Hey yah,
it’s all working well in the firefox(10.0.2), too.

by bjoern giesecke on March 3, 2012 at 5:54 pm. Reply #

Thank you for writing up this great read. really learned a lot. I appreciate the effort put into this site and will visit here more often.

by dissertation help uk on April 29, 2013 at 2:34 am. Reply #

As you are put on the following solution a lot, It is my opinion it’s fundamental to experience a fur that in some way excels, not to mention makes a person researching refined along with puttogether regardless of the most people don it by using or even whereby anyone put it on, within the workplace in order to going doing errands to the holiday weekend.

by http://www.greecebooking.org/--n552133way--130903001-----vuitton-- on May 14, 2014 at 5:13 am. Reply #

wholesale Coyotes cheap jerseys Review With Mastercard

by wholesale cheap Raptors jerseys on June 20, 2014 at 7:29 pm. Reply #

Creating a CSS3D hovering state with fallback for older browsers « Position Absolute – Waves of front-end, product and entrepreneurship articles uGG lejligheder
[url=http://www.e-latin.dk/frankrig/ugg-herre.html]uGG herre[/url]

by uGG herre on September 8, 2014 at 7:17 am. Reply #

Creating a CSS3D hovering state with fallback for older browsers « Position Absolute – Waves of front-end, product and entrepreneurship articles kastanje UGG støvler
[url=http://www.hl-revision.dk/brugt/ugg-hjemmesko-til-m忙nd.html]UGG hjemmesko til m忙nd[/url]

by UGG hjemmesko til m忙nd on September 8, 2014 at 7:18 am. Reply #

Creating a CSS3D hovering state with fallback for older browsers « Position Absolute – Waves of front-end, product and entrepreneurship articles UGG outlet-butikker
[url=http://www.spillehallenchancen.dk/frakke/ugg-lynnea.html]uGG Lynnea[/url]

by uGG Lynnea on September 8, 2014 at 7:18 am. Reply #

Creating a CSS3D hovering state with fallback for older browsers « Position Absolute – Waves of front-end, product and entrepreneurship articles piger uggs
[url=http://www.allofdance.dk/undervisere/ugg-schuhe.html]uGG Schuhe[/url]

by uGG Schuhe on September 8, 2014 at 7:19 am. Reply #

Creating a CSS3D hovering state with fallback for older browsers « Position Absolute – Waves of front-end, product and entrepreneurship articles billige uGG
[url=http://www.hl-revision.dk/brugt/ugg-frankrig.html]uGG Frankrig[/url]

by uGG Frankrig on September 8, 2014 at 7:19 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.