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

最新推荐文章于 2020-05-05 10:36:57 发布

转载最新推荐文章于 2020-05-05 10:36:57 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mandongpiaoxue/p/7634435.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS和JavaScript实现元素旋转和平滑过渡的方法。通过修改元素的transform属性和text-indent值来达到动画效果。同时利用jQuery的animate方法进行平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS：

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

JS：

$('.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');