Başlık biraz yanlış oldu gibi.  Daha önceleri hazırladığım bir kaç tane  Css 2D ve 3D dönüşümlerde geçişler ve dönüşümler esnasında hafif  bir  titreme  olduğunu fark ettim. Bu tarz problemleri ortadan kaldırmak için   Rico Sta. Cruz  jQuery.Transit adında bir uygulama geliştiriyor. Eklenti olmasaydı eğer kendi başına bir Javascript kütüphanesi de  diyebilirdik Transit uygulamasına. Geliştirici belli ki çok emek sarf etmiş. Hemen hemen bütün dönüşümleri pürüzsüz  bir şekilde yapabilme özelliğine sahip.

Css3 transitions ve transforms kullanımı zevkli olduğu kadar biraz da can sıkıcı tarafları var. Her tarayıcı için tekrar tekrar aynı satırları eklemek zorunda kalıyorsunuz. Transit uygulaması sayesinde her tarayıcının fark edebilmesi için teker teker aynı satırı girmenize gerek yok. Kullanımı oldukça basit ve yapmanız gereken head etiketleri arasına js dosya adreslerini eklemek ardından kullanmak istediğiniz 2D yada 3D değerler için bir kaç satır javascript kod eklemek. 

Transit eklentisi ile  birlikte kullanabileceğiniz geçişler ve dönüşümler.

• x(px)
• y(px)
• translate(x, y)
• rotate(deg)
• rotateX(deg)
• rotateY(deg)
• rotate3d(x, y, z, deg)
• scale(x, [y])
• perspective(px)
• skewX(deg)
• skewY(deg)

Kullanım : 

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>

 Dönüşümler : 

$("#box").css({ x: '30px' });               // Sağa Kayma
$("#box").css({ y: '60px' });               // Aşağı Kayma
$("#box").css({ translate: [60,30] });      // Aşağı ve yukarı kayma
$("#box").css({ rotate: '30deg' });         // Saat yönünde döndür
$("#box").css({ scale: 2 });                // Yukarı doğru ölçek 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Yatay ve dikey ölçek
$("#box").css({ skewX: '30deg' });          // Yatay ölçek
$("#box").css({ skewY: '30deg' });          // Dikey ölçek
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

Göreceli değerler : 

$("#box").css({ rotate: '+=30' });          // 30 degrees more
$("#box").css({ rotate: '-=30' });          // 30 degrees less

 İsteğe bağlı tüm birimler : 

$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });

 Çoklu değerler  virgül ile  kullanılabilir : 

$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });

Alıcılar destekler

$("#box").css('rotate');     //=> "30deg"
$("#box").css('translate');  //=> ['60px', '30px']

Animating – $.fn.transition

$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // Süre
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // Hafifletme
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // Süre+hafifletme
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // Geri Çağırma
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // Herşey

$("#box").transition({
  opacity: 0.1, scale: 0.3,
  duration: 500,
  easing: 'in',
  complete: function() { /* ... */ }
});

 Desteklenen  Easing Tipleri

linear, ease, in, out, in-out, snap, easeOutCubic, easeInOutCubic, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo easeInQuad, easeOutQuad, easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInBack, easeOutBack, easeInOutBack.