Exemple
Tourner un <div> élément:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Essayez - le 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, de l'échelle, déplacer, inclinaison, etc., éléments.
Pour mieux comprendre la propriété transform, voir une démonstration .
| Valeur par défaut: | none |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.transform="rotate(7deg)" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| transform (2D) | 36,0 4.0 -webkit- | 10.0 9,0 -ms- | 16,0 3.5 -moz- | 9.0 3.2 -webkit- | 23,0 15,0 -webkit- 10.5 -o- |
| transform (3D) | 36,0 12,0 -webkit- | 12.0 | 10.0 | 16,0 10.0 -moz- | 9.0 4.0 -webkit- |
Syntaxe
transform: none|transform-functions|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| none | Définit qu'il devrait y avoir aucune transformation | Joue-le " |
| matrix( n,n,n,n,n,n ) | Définit une transformation 2D, en utilisant une matrice de six valeurs | Joue-le " |
| 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 | Joue-le " |
| translate3d( x,y,z ) | Définit une traduction 3D | |
| translateX( x ) | Définit une translation, en utilisant uniquement la valeur de l'abscisse | Joue-le " |
| translateY( y ) | Définit une translation, en utilisant uniquement la valeur de l'axe des Y. | Joue-le " |
| translateZ( z ) | Définit une traduction 3D, en utilisant seulement la valeur de l'axe Z | |
| scale( x,y ) | Définit une transformation à l'échelle 2D | Joue-le " |
| scale3d( x,y,z ) | Définit une transformation d'échelle 3D | |
| scaleX( x ) | Définit une transformation d'échelle en donnant une valeur pour l'axe X | Joue-le " |
| scaleY( y ) | Définit une transformation d'échelle en donnant une valeur pour l'axe Y. | Joue-le " |
| 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 | Joue-le " |
| rotate3d( x,y,z,angle ) | Définit une rotation 3D | |
| rotateX( angle ) | Définit une rotation 3D le long de l'axe X | Joue-le " |
| rotateY( angle ) | Définit une rotation 3D le long de l'axe Y. | Joue-le " |
| rotateZ( angle ) | Définit une rotation 3D le long de l'axe Z | Joue-le " |
| skew( x-angle,y-angle ) | Définit une transformation skew 2D le long de la X- et l'axe des Y | Joue-le " |
| skewX( angle ) | Définit une transformation par inclinaison 2D le long de l'axe X | Joue-le " |
| skewY( angle ) | Définit une transformation par inclinaison 2D le long de l'axe Y | Joue-le " |
| perspective( n ) | Définit une vue en perspective d'un élément 3D transformé | |
| 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. Lisez à propos de hériteront |
Autres exemples
Images jetées sur la table
Cet exemple montre comment créer "polaroid" images et faire pivoter les images.
Pages associées
Tutoriel CSS: CSS 2D Transforms
Tutoriel CSS: CSS 3D Transforms
Référence HTML DOM: transform property la transform property