Générateur de transform CSS
Générez des valeurs transform CSS : translate, rotate, scale, skew, plus perspective 3D, rotateX/rotateY et translateZ, avec transform-origin et aperçu en direct.
Préréglages
Transformations 2D
Transformations 3D
Une perspective de 0 signifie aucune. Sans perspective, les rotations 3D paraissent plates.
Origine de la transformation
Aperçu
Le contour en pointillés montre l’élément non transformé ; le point rouge est l’origine de la transformation.
transform: none;
Outils Connexes
Voir ToutQu'est-ce que Générateur de transform CSS ?
Combine les fonctions CSS transform avec des curseurs : translate, rotate, scale et skew en 2D, ainsi que perspective, rotateX, rotateY et translateZ en 3D. Un contour en pointillés dans l'aperçu montre la position d'origine et un point rouge marque l'origine de la transformation.
Comment utiliser Générateur de transform CSS
- Choisissez un préréglage (Inclinaison 3D, Retournement, Penché, Zoom avant, Carte 3D) ou partez de Aucune.
- Ajustez Déplacer en X/Y, Rotation, Échelle X/Y et Inclinaison X/Y dans Transformations 2D.
- Réglez Perspective, Rotation X, Rotation Y et Déplacer en Z dans Transformations 3D.
- Choisissez l'Origine de la transformation dans la liste ou réglez Position en X/Y.
- Copiez le code CSS.
Exemple
Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5
transform: translate(20px, 0) rotate(45deg) scale(1.5);
Quand utiliser Générateur de transform CSS
Utilisez-le pour des effets de survol, des retournements de cartes, des présentations 3D inclinées et des décalages de positionnement précis. Les transformations n'affectent pas la mise en page (les éléments voisins ne bougent pas) ; pour modifier la mise en page, utilisez les marges, flexbox ou grid. Combinez-le avec le générateur d'animations CSS pour animer entre des transformations.
Comment fonctionne Générateur de transform CSS
Les fonctions ne sont écrites que si elles ne sont pas neutres, dans cet ordre : perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Les transformations s'appliquent de droite à gauche relativement à l'élément : l'ordre change donc le résultat ; perspective() doit venir en premier pour affecter les fonctions 3D qui la suivent. Une échelle X/Y égale est écrite sous la forme d'un seul scale(n). transform-origin n'est produit que s'il diffère du centre par défaut (50% 50%).
Cas d'utilisation courants
- Cartes produit inclinées en 3D
- Effets de retournement de carte avec rotateY(180deg)
- Zoom au survol sur des images
- Étiquettes de section en biais avec skew
- Astuces de centrage avec translate(-50%, -50%)
Questions Fréquentes
Quelle différence entre perspective() et la propriété perspective ?
perspective() dans transform ne s'applique qu'à cet élément. La propriété perspective sur un parent crée un espace 3D partagé pour tous ses enfants.
Pourquoi ma rotation 3D paraît-elle plate ?
Sans perspective, il n'y a pas de raccourci de profondeur. Réglez Perspective sur une valeur comme 800px.
transform affecte-t-il la mise en page ?
Non. L'élément garde son espace d'origine dans la mise en page ; seul son rendu est déplacé, tourné ou mis à l'échelle.