Discussion on Friendly Flip 'n' Fade - CSS3 flip, fade and glow!


iamfriendly does not currently provide support for this item.

10 comments found.

Nice effect!

Thanks validano, appreciate the compliment! Hopefully some folks will find it useful as well as pretty :)

Is there a way to provide effect for IE9 or Firefox?

Can I add HTML such as text links?

Absolutely! I’ve just replied to your e-mail, but I’ll clarify here – the flip ‘boards’ can contain pretty much anything you can throw at them. Naturally for links you’ll want them to be on the ‘back’ side so that they’re clickable. Otherwise people will hover over the ‘board’ and the link will disappear, haha.

Thanks for the question!

... i also do have the same question as Gravnetic: any way to make a “flip” working also in Firefox and IE? advise please! ... however … here’s a BIG 5 STARS THANKS for your wonderful, clean work and documentation!!!! (can’t wait for the /iamfriendly.com to be all up … very exciting / promising …)

Cokoli, thanks very much for the comment and purchasing my item, I really appreciate it.

Firefox and IE do not support the transitions in CSS that is required to actually have the flip effect work in those browsers. There is no non-webkit alternative, sadly. If they ever do support these in the future I will update the script immediately.

You might look into a jquery alternative for those browsers, perhaps, until then. Thanks again!

thank you for the explanation! ... it is a sweet script anyway and have helped me a lot! Load of thanks!

ok Tested it:

IE 9 : Doesn’t work Firefox 4.2: Doesn’t work opera 11: Doesn’t work Chrome 10 / Iron 10: works in parts Safari 5: works in parts, but looks very different to Chrome

working in parts means: It really depends how you move your Mouse over them (speed / direction). Depending on that, there can be often I belief unwanted effects, since it seems to move a few pixels only forward and backwards over and over.

On the Pro side: - why complain for that Price - even through i can’t use it for what i intended to do, maybe i find another use ;).

Anyways thanks for the nice script :).

Thanks for the purchase. Your comments mirror exactly what I have in the specifications for the code. i.e. It is progressively enhanced in browsers which are capable of showing the effects to their fullest, but the data on the page is still accessible to all other browsers.

Chrome and Safari (webkit-based browsers) are the only ones which support the transitions necessary for the ‘flip’ to work. FF4 supports some of the others. IE9 doesn’t. Quelle surprise.

The important thing to realise is that this is purely CSS and that websites do not and should not look exactly the same in every browser. As long as the content on the page is accessible in all browsers and we progressively enhance so that visitors using a modern browser get a ‘fuller’ experience, that is everything we should be striving for.

Again, thanks for the purchase.

i am looking to do a webpage with a full screen background and be able to do a flip of the entire page because my client wants to have his 2 related companies in one website. its an odd setup but i like to give the people what they want :) can you tell me if this is possible with your code? thanks


Technically, it’s possible. However, it is a terrible idea because most browsers would baulk horribly at it. Flipping a whole page would require an awful lot of resources on the browser and would probably be incredibly slow. Plus, the ‘flip’ doesn’t animate in IE, so it’d be really weird. As soon as you move the mouse, the ‘other’ side would be shown.

So, while it’s possible, I really can’t recommend it.

Hello. The Flipeffect not work in Firerfox 11-12 And even in IE 8 Please Help

panorade, thanks for buying. Please see the supported browser list. IE 6 /7/8 simply don’t support the transitions needed and neither does Firefox. The flip effect is strictly a Webkit (Chrome/Safari) effect. It’s possible in javascript, but not in CSS alone.

Thanks again.

Hi, after the image or whatever has flipped, can you have a link that will pop up an Ajax window? Thanks

Hi shiz23,

You can have whatever you like in the content – including links.

They are great. Good luck