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');