Exemple
Faites pivoter un élément div:
document.getElementById("myDIV").style.transform = "rotate(7deg)";
Essayez vous - même » Définition et utilisation
La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété permet de faire pivoter, échelle, déplacer, inclinaison, etc., des éléments.
Support du navigateur
La propriété de transformation est pris en charge dans Internet Explorer 10 et Firefox.
Internet Explorer 9 supporte une alternative, la propriété msTransform (2D transforms only) .
Opera, Chrome et Safari soutenir une alternative, la propriété WebkitTransform (3D et 2D transforme).
Syntaxe
Retour la propriété transform:
object .style.transform Définissez la propriété transform:
object .style.transform="none| Valeurs de propriété Valeur La description none Définit qu'il devrait y avoir aucune transformation matrix( n,n,n,n,n,n ) Définit une transformation 2D, en utilisant une matrice de six valeurs matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) Définit une transformation en 3D, en utilisant une matrice 4x4 de 16 valeurs translate( x,y ) Définit une traduction 2D translate3d( x,y,z ) Définit une traduction 3D translateX( x ) Définit une translation, en utilisant uniquement la valeur de l'axe des X translateY( y ) Définit une translation, en utilisant uniquement la valeur de l'axe des Y translateZ( z ) Définit une translation 3D, en utilisant uniquement la valeur de l'axe Z scale( x,y ) Définit une transformation d'échelle 2D scale3d( x,y,z ) Définit une transformation à l'échelle 3D scaleX( x ) Définit une transformation à grande échelle, en donnant une valeur pour l'axe X scaleY( y ) Définit une transformation d'échelle en donnant une valeur pour l'axe Y scaleZ( z ) Définit une transformation d'échelle 3D en donnant une valeur pour l'axe Z rotate( angle ) Définit une rotation 2D, l'angle est spécifié dans le paramètre rotate3d( x,y,z,angle ) Définit une rotation 3D rotateX( angle ) Définit une rotation 3D le long de l'axe X rotateY( angle ) Définit une rotation 3D le long de l'axe Y. rotateZ( angle ) Définit une rotation 3D le long de l'axe Z skew( x-angle,y-angle ) Définit une transformation d'inclinaison 2D le long de l'axe X et l'axe Y skewX( angle ) Définit une transformation d'inclinaison 2D le long de l'axe X skewY( angle ) Définit une transformation d'inclinaison 2D le long de l'axe Y. perspective( n ) Définit une vue en perspective d'un élément transformé 3D initial Définit cette propriété à sa valeur par défaut. Lisez à propos initial inherit Hérite cette propriété de son élément parent. En savoir plus sur hériteront
Détails techniques
Valeur par défaut: aucun Valeur de retour: Une chaîne, ce qui représente la propriété de transformation d'un élément version CSS CSS3
Pages associées
Référence CSS: transform property la transform property
<Style objet