jQuery编程挑战#013：使用jQuery生成图片的水平翻转动画效果

jQuery编程挑战#013：使用jQuery生成图片的水平翻转动画效果

<img src="http://www.gbtags.com/gb/laitu/500x300&text=upyun%E5%8F%88%E6%8B%8D%E4%BA%91/CCCCCC/1e90ff">

img {
transform: rotateY(0deg);
-ms-transform: rotateY(0deg);   /* IE 9 */
-webkit-transform: rotateY(0deg); /* Safari and Chrome */
-o-transform: rotateY(0deg);    /* Opera */
-moz-transform: rotateY(0deg);

transition: 1s;
}

img:hover {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);   /* IE 9 */
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
-o-transform: rotateY(180deg);    /* Opera */
-moz-transform: rotateY(180deg);
}

img {
transition: 1s;
}

$("img").on("mouseover", function(){
$(this).css({
"transform": "rotateY(180deg)",
"-webkit-transform" : "rotateY(180deg)"
});
});

$("img").on("mouseout", function(){
$(this).css({
"transform": "rotateY(0)",
"-webkit-transform" : "rotateY(0)"
});
});