求大神看下这个jq实现的翻牌效果原理，请问它是怎样实现的？感觉不是`animate`

Question

http://www.wesai.com/&x-from=...就像xSai首页赛事下边的立体翻牌效果，写了几次都不是很像微赛的那种，求大神写个类似的demo，我现在的实现方式与http://www.xwcms.net/webAnnex... 这个demo 一致，其原理是 animate动画效果，但是与其Xsai页面那种效果感觉有差异，尤其是卡顿效果，立体的翻牌动作，我是直接将宽弄为0然后在出来100%的宽，真不知道咋想的var turn = function(target,time,opts){     target.find('a').hover(function(){         $(this).find('img').stop().animate(opts[0],time,function(){             $(this).hide().next().show();             $(this).next().animate(opts[1],time);         });     },function(){         $(this).find('.info').animate(opts[0],time,function(){             $(this).hide().prev().show();             $(this).prev().animate(opts[1],time);         });     }); }var verticalOpts = [{'width':0},{'width':'180px'}]; turn($('#vertical'),100,verticalOpts);var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}]; turn($('#horizontal'),100,horizontalOpts);但是我们产品执意需求上面那种效果

Answer 1

请看这里
我这里没有使用 js做操作 而是使用了 css的伪类
一些默认设置

{

  width:185px;

  height:251px;

  -webkit-transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-transition: all 400ms linear;

  transition: all 400ms linear;

}

在需要翻转的时候 添加 样式

{

  -webkit-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  transform: rotateY(180deg); 

}