Générateur de transformations CSS3


La propriété transform applique une transformation 2D ou 3D à un élément, comme des rotations ou des translations. Vous pouvez combiner ces transformations à une transition CSS pour obtenir un effet d'animation.

Effects
Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin

La propriété transform vous permet de réaliser des tranformations 2d ou 3d sur un élément html, comme des rotations, translations, asymétries.
Supposons que vous ayez un élement identifié MonDiv, et défini comme ci-dessous :

<div id="MonDiv"> </div>

La syntaxe de transform pour de la transformation 2d est la suivante :

#MonDiv {
    transform: rotate(30deg) translateX(30px) translateY(20px);
}

La règle définie ci-dessus applique une rotation de 30 degrès à l'élement, ainsi qu'une translation de 30 pixels sur l'axe X (horizontal) et 20 pixels sur l'axe Y (vertical).
Les différents types de transformation sont rotate (rotation), translate (translation), scale (échelle de taille), skew (asymétrie). Il est possible de cumuler autant de transformations que souhaité, il suffit pour cela de les ajouter les unes à la suite des autres.

Il est possible d'obtenir le même résultat que la règle ci-dessus, avec la syntaxe suivante :

#MonDiv {
    transform: rotate(30deg) translate(30px, 20px);
}

Dans cet exemple, la fonction translate accepte en paramètres les valeurs des axes X et Y, ou une seule valeur si celle-ci doit être appliquée aux 2 axes. Toutes les fonctions de transformation peuvent être écrites de cette manière, à l'exception de rotate, qui ne peut tourner sur aucun autre axe pour la transformation 2d.

Ci-dessous, un exemple de transformation 3d :

#MonDiv {
    transform: rotate(30deg) rotateY(45deg) translateX(30px) translateY(20px) translateZ(10px);
}

Dans cet exemple on ajoute une rotation sur l'axe Y, et une translation sur l'axe Z.

Ci-dessous, la syntaxe équivalente :

#MonDiv {
    transform: rotateZ(30deg) rotateY(45deg) translate3d(30px, 20px, 10px);
}

Pour une rotation 3d, vous pouvez également utiliser la fonction Rotate3d, qui prend en paramètres les offsets X, Y, et Z de l'axe de rotation, ainsi que l'angle de rotation.

#MonDiv {
    transform: rotate3d(20,10,0, 60deg);
}


Laisser votre avis