Générateur de transformation CSS pour les paresseux.
Réglez l'échelle, faites pivoter, traduisez et inclinez et regardez l'aperçu en direct pour obtenir la vue souhaitée.
Évitez de définir des valeurs extrêmes pour la propriété skew, car l'aperçu peut couvrir le panneau des paramètres. Dans ce cas, vous devrez actualiser la page.
Mettre à l'échelle, faire pivoter, traduire et incliner
L'échelle fonctionne comme si vous faisiez un zoom avant et arrière sur l'élément ciblé. La valeur d'échelle par défaut est 1, qui fonctionne comme un multiplicateur de la taille d'origine. Cela signifie que 0,5 moitiés tandis que 2 double la section.
Faites pivoter l'élément dans le sens des aiguilles d'une montre avec la deuxième propriété définie en degrés. Tourner à 180° met l'objet à l'envers tandis que 360° ramène à sa position verticale d'origine. Définissez n'importe quelle valeur positive ou négative ou même des décimales.
Translate décale l'élément avec des pixels liés à sa position d'origine. La valeur X horizontalement tandis que Y verticalement lorsqu'il y a un attribut de rotation est zéro.
Inclinez les objets sur leur axe horizontal (X) ou vertical (Y).
Transformation CSS expliquée
La propriété CSS transform vous permet de faire pivoter, mettre à l'échelle, incliner et traduire un élément. Il modifie l'espace de coordonnées du modèle de formatage visuel CSS.
Définition et utilisation
La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc., des éléments.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Syntaxe
transform: none|transform-functions|initial|inherit;
