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

Posted 2020-10-09 獨行者

.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‘);