Develop Reference

Trouble With Transform Rotation+IE9/10

Hoping someone can steer me in the right direction as I've been trying to accomplish this task for a few hours and can't seem to come up with a working cross-browser combination of CSS / Javascript.
Basically, what I am trying to do is a "Card Flip" using CSS and Javascript.
The code works wonderfully in Google Chrome, but I can't seem to get it to work in IE9/10.
Here is a sample jsFiddle.
When viewing the same jsfiddle in IE10, you only see the back side of the card and the animation does not work.
Any suggestions?
Ignore this - need a code snippet to post the above jsFiddle link.

The jsFiddle sample is only working for Chrome (more precisely, webkit browsers).
This is quite logic, as only css -webkit properties are used here.
The Card Flip animation you want to use should also work perfectly for IE10 (And Firefox even not mentioned in your question)
Check out the W3school page for more details on the 3D Transforms CSS properties you'll need to use.
Now the problem: IE9.
IE9 do not provide CSS animations. You'll have to use a fallback
with Javascript (jquery animate).
IE9 do no provide rotatey possibility. BUT, it provides flipX.
Yes, you will not have the 3D effect, but you'll still have the
flip effect.
The IE9 flip property is
filter: FlipH;
-ms-filter: "FlipH";

IE8 transition on hover

I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.

IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.

For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.

Animation on a HTML5 mobile site

I'm making a mobile website and I'm using javascript to animate things around? Is this recommended or should I use CSS3 transitions?
If so how can I implement a simple CSS3 transition that will move divA down 20px when divA is clicked?
Thanks.

You need to use a combination of javascript and CSS. CSS for the animations and javascript to trigger them.
Take a look at this jQuery plugin: http://ricostacruz.com/jquery.transit/
I've been using it recently and it is very useful, especially for callbacks.
Hope that helps :)

Please do not use jQuery + a plugin just to move down a div on a mobile device.
CSS3 transitions and animations are very well supported on mobile devices, on some of them even hardware accelerated.
Here is a simple script that does what you need:
http://jsfiddle.net/3Sd4U/

Regarding JQuery Script

Wonder if JQuery can do something like http://ikt.co.id/
look at the flash right side... does it posible? and someone can send me a guide or script sample?
thanks guys!

You might want to take a look at the perspective CSS3 property for the start bit. But that is only currently supported by webkit browsers, such as Safari and Chrome.
From then on, using jQuery's hover event to both stop the perspective and then to shift the padding of each element.

Is there a jQuery fix to make CSS3 work in all browsers?

Is there a jQuery solution to make all browsers behave like a browser with CSS3 capabilities?

You can use CSS Sandpaper.