使用jQuery的animate實現transform動畫效果

标签：16px   直接   query   size   tin   ati   fun   css   mat   

.i1{transform:skewY(-10deg) rotateY(-90deg);text-indent: -90px;}
        /*i1中不带text-indent,會導致直接閃現*/
.i2{transform:rotateY(0);}

$(‘.i1‘).css(‘z-index‘,4);
$(‘.i2‘).css(‘z-index‘,5);            
$(‘.i1‘).animate({textIndent: 0},  　　//textIndent的值便是now的終值
    {step: function(now,fx) {
      $(this).css(‘transform‘,‘rotateY(‘+now+‘deg)‘);   
    },
        duration:1000
    },‘linear‘);
$(‘.i2‘).animate({textIndent: 90},  
    {step: function(now,fx) {
      $(this).css(‘transform‘,‘skewY(‘+now/10+‘deg) rotateY(‘+now+‘deg)‘);   
    },
        duration:1000
    },‘linear‘);

使用jQuery的animate實現transform動畫效果

标签：16px   直接   query   size   tin   ati   fun   css   mat   

原文地址：http://www.cnblogs.com/mandongpiaoxue/p/7634435.html