Wie verwendet man css3 Übergänge mit jquery animate?

Question

Ich habe dieses Karussell von here und ich versuche, einige CSS3-Transformationsoptionen hinzuzufügen.

genauer:

-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateY(45deg); 

in der Javascript habe ich

if (newPosition == 1) { 
    new_width = pluginData.largeFeatureWidth; 
    new_height = pluginData.largeFeatureHeight; 
    new_top = options.topPadding; 
    new_zindex = $feature.css("z-index"); 
    new_fade = 1.0; 
    } else { 
    new_width = pluginData.smallFeatureWidth; 
    new_height = pluginData.smallFeatureHeight; 
    new_top = options.smallFeatureOffset + options.topPadding; 
    new_zindex = 1; 
    new_fade = 0.4; 
    } 

und die beseelten Funktion läuft hier

.animate(
     { 
     width: new_width, 
     height: new_height, 
     top: new_top, 
     left: new_left, 
     opacity: new_fade 
     } 

die erzeugte CSS ist:

element.style { 
    width: 225px; 
    height: 115px; 
    top: 70px; 
    left: 50px; 
    opacity: 0.4; 
    z-index: 1; 
} 

jetzt, alle diese Vars dieses Plugin berechnet werden, und ich bin nur daran interessiert, die Transformationsmöglichkeiten zu dieser beseelten Funktion, so etwas wie dies bei der Zugabe:

.... 
} else { 
    new_width = pluginData.smallFeatureWidth; 
    new_height = pluginData.smallFeatureHeight; 
    new_top = options.smallFeatureOffset + options.topPadding; 
    new_zindex = 1; 
    new_fade = 0.4; 
    new_transform_style = 'preserve-3d'; 
    new_transform = 'rotateY(45deg)'; 
} 

und

.animate(
     { 
     width: new_width, 
     height: new_height, 
     top: new_top, 
     left: new_left, 
     opacity: new_fade, 
     transform_style = new_transform_style; 
     transform = new_transform; 
     } 

aber Ich bin nicht sicher, dass das die richtigen Stil Notationen für animierte sind

irgendwelche Ideen?

dank

Answer 1

Sie können Rotation/Skalierung in jQuery standardmäßig animieren.

Aber es ist ein Plugin, das das behebt:

Animate Rotation and Scale in CSS

Answer 2

Sie können eine benutzerdefinierte Eigenschaft mit .animate() verwenden und die Transformation „von Hand“ mit der Sprungfunktion durchzuführen.

Weitere Informationen finden Sie unter this SO answer of me.