Générateur de transformations CSS
Guide
Générateur de transformations CSS
Construisez visuellement des propriétés de transformation CSS avec aperçu en direct. Ajustez les curseurs de transformation 2D et 3D pour la rotation, la mise à l'échelle, le cisaillement, la translation et la perspective, puis copiez le CSS généré. Comprend un sélecteur de grille d'origine de transformation, une bascule d'aperçu d'animation et des préréglages en un clic pour des effets courants comme les retournements et les inclinaisons.
Comment utiliser
Faites glisser les curseurs pour ajuster chaque propriété de transformation et voyez l'effet appliqué à l'élément d'aperçu en temps réel. Utilisez la section 2D pour la rotation, la mise à l'échelle, le cisaillement et la translation. Passez à la section 3D pour rotateX, rotateY, rotateZ et la perspective. Cliquez sur n'importe quelle cellule de la grille d'origine de transformation pour modifier le point central de rotation. Essayez les préréglages pour des effets rapides ou activez l'aperçu de l'animation pour voir la transformation s'animer en boucle. Copiez le CSS généré lorsque vous êtes satisfait du résultat.
Caractéristiques
- Aperçu visuel en direct – Voyez les transformations appliquées à un élément de démonstration instantanément pendant que vous ajustez les curseurs
- Transformations 2D – Rotation, mise à l'échelle X/Y, cisaillement X/Y et translation X/Y avec des contrôles de curseur précis
- Transformations 3D – RotationX, rotationY, rotationZ et perspective pour les effets de profondeur
- Grille d'origine de transformation – Sélecteur visuel de grille 3×3 pour définir le point central de rotation, plus des entrées en pourcentage personnalisées
- Presets – Effets en un clic : Retourner horizontalement, Retourner verticalement, Incliner vers la gauche, Incliner vers la droite, Retournement de carte 3D, Sortir en relief
- Animation Preview – Basculez pour voir la transformation s'animer en douceur en boucle avec des transitions CSS
- Sortie CSS propre – Chaîne de transformation combinée avec origine de transformation et préfixes vendeurs facultatifs
- Réinitialiser tout – Rétablir toutes les valeurs des curseurs aux valeurs par défaut en un clic
FAQ
-
Quelle est la différence entre les transformations CSS 2D et 3D ?
Les transformations 2D opèrent uniquement sur les axes X et Y, affectant les dimensions de largeur et de hauteur. Elles incluent la rotation, la mise à l'échelle, le cisaillement et la translation. Les transformations 3D ajoutent l'axe Z pour la profondeur, permettant aux éléments d'apparaître en rotation dans un espace tridimensionnel. Des propriétés comme rotateX et rotateY inclinent les éléments vers ou loin du spectateur. Les transformations 3D nécessitent une valeur de perspective sur l'élément parent ou l'élément lui-même pour créer l'illusion de profondeur. Sans perspective, les rotations 3D apparaissent plates. Les transformations 2D et 3D peuvent être combinées dans une seule propriété de transformation.
-
Que fait transform-origin ?
Transform-origin définit le point autour duquel les transformations sont appliquées. Par défaut, c'est le centre de l'élément (50% 50%). Le changer en coin supérieur gauche (0% 0%) fait pivoter les rotations depuis le coin au lieu du centre. Cela change radicalement l'apparence de la rotation, de la mise à l'échelle et du cisaillement. Par exemple, faire pivoter de 45 degrés depuis le centre fait tourner l'élément sur place, mais le faire pivoter depuis le coin supérieur gauche le fait basculer comme une porte. L'origine accepte des mots-clés (haut, centre, bas, gauche, droite), des pourcentages ou des valeurs en pixels pour un contrôle précis.
-
Comment fonctionne la perspective CSS ?
La perspective définit la distance entre le spectateur et le plan Z, créant l'illusion de profondeur pour les transformations 3D. Une valeur plus petite comme 200px crée une perspective rapprochée extrême où les effets 3D semblent dramatiques et déformés. Une valeur plus grande comme 2000px crée une perspective subtile et distante. La perspective peut être définie sur l'élément parent comme une propriété (perspective: 800px) ou sur l'élément lui-même comme une fonction de transformation (transform: perspective(800px)). La méthode parent est préférée lorsque plusieurs éléments enfants partagent le même espace 3D.
-
Ai-je encore besoin de préfixes vendeurs pour les transformations CSS ?
En 2026, les préfixes vendeurs pour les transformations CSS sont rarement nécessaires. La propriété de transformation non préfixée est prise en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et les navigateurs mobiles. Le préfixe -webkit-transform était requis pour les anciennes versions de Safari et iOS avant Safari 9 (2015). Si vous devez prendre en charge de très anciens navigateurs, ce générateur peut inclure des préfixes vendeurs sous forme de commentaire dans la sortie. Pour la plupart des projets ciblant les navigateurs actuels, la version non préfixée est suffisante et le code est plus propre sans préfixes.
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
Outils essentiels
Tout voir Nouveautés
Tout voirMise à jour: Notre dernier outil a été ajouté le 22 avr. 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
