How to create a card flip effect on DIV using javascript

Question

I want to create a card flip effect (same as webkit transitions and 3d transforms) on DIV using simple javascript and CSS and NO libraries or plugins. How can I achieve this? As most of the CSS3 properties work for webkit browsers. And most of the javascript solutions uses libraries like jquery and its plugins. I am looking for a solution which doesn't use any library but only javascript/CSS and still works cross browser.

Any help would be appreciated.

Regards, manishekhawat

Answer 1

3d Transforms in CSS3 currently only work on webkit browsers. Sorry - there is no way to do this in other browsers without using a JS polyfill such as cssSandpaper ( http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ ).

This is not recommended though, as it will lead to a serious decrease in performance when loading the JS version.

3d Transforms and keyframe animations are still a (fairly) brand new feature of the CSS3 spec, and are therefore only adopted in the most up-to-date browsers (safari, chrome). If you want a cross-browser solution that doesn't requre javascript you're going to have to sit on your thumbs for a few years.