Animate translate3d ve jquery ile ölçeklendirilsin mi?

Question

Bu yüzden bir nesnenin 3d çevirisini ve ölçeğini aynı anda farklı değerlere düzenleyen bir css komutu var.

_this.css('-webkit-transform', 'translate3d('+X+'px, '+Y+'px, 0) scale('+scaleFactor+', '+scaleFactor+')'); 

Bu harika çalışıyor ama anında olur, sana genişlik ve yüksekliğini nasıl animasyon benzer jquery kullanarak bu animasyon istiyorum. Dolayısıyla, SO üzerinde görmeye devam ettiğim çözüm, bunun bir varyasyonudur. borderSpacing 0 olarak ayarlanır bazı değerdir

$('#foo').animate({ borderSpacing: -90 }, { 
    step: function(now,fx) { 
     $(this).css('transform','rotate('+now+'deg)'); 
    }, 
    duration:'slow' 
},'linear'); 

, nihai amacın -90 olacaktır ve adım ve yavaş yavaş döndürmek istiyorum. Ancak bu sadece bir değişken için çalışır, 3 tamamen farklı değişkenlerim olduğunda bunu yapmam mümkün mü? ve eğer öyleyse nasıl? Bahsedilen çözümde, adım atma, nihai hedefe doğru aşamalı bir adım olan bir değişkeni yaratır, fakat 3 bağımsız değişkenim olduğunda, bunun nasıl çalışacağından emin değilim.

Answer 1

En iyi rota sadece eleman

#foo{ 
    transition: all 700ms linear; 
} 

bir css kuralı uygulamak ve

---

(yeni dönüşümü değerler uygulamak ) Senaryonuzun sadece ilk kısmını kullanmak olacaktır

.animate yolunu kullanmanız gerekiyorsa, nesne birden fazla özellik taşıyabilir ve

$('#foo').animate({ borderSpacing: -90, otherProp: 80 }, { 
    step: function(now,fx) { 
     switch(fx.prop){ 
      case 'borderSpacing': 
       $(this).css('transform','rotate('+now+'deg)'); 
       break; 
      case 'otherProp': 
       $(this).css('something else', now); 
       break; 
     } 
    }, 
    duration:'slow' 
},'linear');