Générateur de transformations
Créez et prévisualisez visuellement les propriétés de transformation CSS.
CSS Transform est une propriété CSS puissante qui vous permet de transformer des éléments web dans un espace 2D ou 3D. Grâce à des transformations comme translate, rotate, scale et skew, vous pouvez créer des designs web dynamiques et interactifs. Créez facilement les effets souhaités avec un aperçu en temps réel.
transform: none;Fonctions de transformation
- • translate(x, y): translate(x, y) : Déplacer l'élément de x, y
- • scale(x, y): scale(x, y) : Mettre l'élément à l'échelle par rapport à x, y
- • rotate(angle): rotate(angle) : Faire pivoter l'élément d'un angle
- • skew(x, y): skew(x, y) : Incliner l'élément de x, y degrés
Conseils d'utilisation
- • Plusieurs fonctions de transformation peuvent être combinées avec des espaces
- • Changez l'origine de la transformation avec transform-origin
- • Utilisez avec la transition pour créer des effets d'animation
- • Utilisez la propriété perspective pour les transformations 3D
🎯 Concepts de base de la transformation
CSS Transform est une propriété CSS qui modifie la forme, la taille et la position des éléments. Elle permet une transformation visuelle des éléments sans perturber le flux normal du document.
Syntaxe de base :
transform: function(value) function(value) ...;📐 Détails de la fonction de transformation
🔄 Translate (Mouvement)
- •
translate(x, y): translate(x, y) : Déplacer le long des axes X, Y - •
translateX(x): translateX(x) : Déplacer uniquement le long de l'axe X - •
translateY(y): translateY(y) : Déplacer uniquement le long de l'axe Y - •
translate3d(x, y, z): translate3d(x, y, z) : Mouvement 3D
transform: translate(50px, 100px);📏 Scale (Redimensionnement)
- •
scale(x, y): scale(x, y) : Mettre à l'échelle les axes X, Y - •
scaleX(x): scaleX(x) : Mettre à l'échelle uniquement l'axe X - •
scaleY(y): scaleY(y) : Mettre à l'échelle uniquement l'axe Y - • Supérieur à 1 agrandit, inférieur à 1 réduit
transform: scale(1.5, 0.8);🔄 Rotate (Rotation)
- •
rotate(angle): rotate(angle) : Faire pivoter autour de l'axe Z - •
rotateX(angle): rotateX(angle) : Faire pivoter autour de l'axe X - •
rotateY(angle): rotateY(angle) : Faire pivoter autour de l'axe Y - • Utilisez les unités deg, rad, turn pour les angles
transform: rotate(45deg);📐 Skew (Cisaillement)
- •
skew(x, y): skew(x, y) : Incliner le long des axes X, Y - •
skewX(angle): skewX(angle) : Incliner le long de l'axe X - •
skewY(angle): skewY(angle) : Incliner le long de l'axe Y - • Transformer en forme de parallélogramme
transform: skew(15deg, 5deg);🎨 Origine de la transformation (Point de transformation)
La propriété transform-origin définit le point d'origine de la transformation. La valeur par défaut est le centre de l'élément (50% 50%).
Utilisation de mots-clés
transform-origin: top left;Utilisation de pourcentages
transform-origin: 25% 75%;Utilisation de pixels
transform-origin: 10px 20px;⚡ Conseils d'optimisation des performances
✅ Recommandations
- • Animer uniquement la transformation et l'opacité
- • Utiliser la propriété will-change
- • Utiliser l'accélération 3D (translateZ(0))
- • Créer des couches composites pour de meilleures performances
❌ Choses à éviter
- • Animer la largeur, la hauteur
- • Animer les positions gauche, haut
- • Nidification excessive des transformations
- • Utilisation inutile de will-change
Exemple d'optimisation des performances :
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animation et transitions
Transform peut être utilisé avec CSS Transition et Animation pour créer des effets fluides.
Exemple de transition
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Exemple d'animation par images clés
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Compatibilité des navigateurs
CSS Transform est pris en charge dans tous les navigateurs modernes, mais des préfixes de fournisseur peuvent être nécessaires pour les navigateurs plus anciens.
Exemple de préfixe de fournisseur :
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Exemples d'utilisation réelle
Effet de survol de carte
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Spinner de chargement
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Effet d'entrée de modal
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Effet de clic de bouton
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Outils de débogage et de développement
Outils de développement du navigateur
- • Édition en temps réel dans le panneau Éléments
- • Vérifiez les valeurs finales dans l'onglet Calculé
- • Analyse des performances avec l'onglet Performances
- • Vérifiez la structure des couches avec la vue 3D
Propriétés CSS utiles
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Conseils de pro
Conseil de performance
L'utilisation de transform3d() ou translateZ(0) pour créer des couches composites pour l'accélération GPU peut améliorer considérablement les performances d'animation.
Conseil d'accessibilité
Utilisez la requête média prefers-reduced-motion pour fournir des alternatives aux utilisateurs sensibles au mouvement.
Conseil de conception
Définir correctement transform-origin peut créer des effets de transformation plus naturels.
Conseil de développement
L'utilisation de variables CSS pour contrôler dynamiquement les valeurs de transformation facilite l'intégration JavaScript.