La première fois a rotateY J'étais sûr d'incliner une carte dans l'écran juste écrasé à plat à la place, j'ai perdu la majeure partie d'un après-midi avant de comprendre pourquoi Il n'y avait pas de perspective J'avais écrit la rotation mais pas la seule fonction qui fait une rotation lire comme profondeur, et CSS a fait exactement ce que je lui ai dit plutôt que ce que je voulais dire Cet après-midi est toute la raison pour laquelle je construis maintenant des transformées en faisant glisser des curseurs et en regardant une boîte répondre, au lieu de taper une valeur, économiser, rafraîchir, et plisser les yeux.
Le CSS transform la propriété est l'une des choses les plus utiles dans la langue et l'une des plus faciles à se tromper subtilement Elle déplace, tourne, escalade et biaise un élément sans rien déranger autour d'elle, c'est pourquoi chaque effet de vol stationnaire, chaque levée de carte, chaque animation d'entrée s'appuie dessus Mais elle emballe beaucoup de comportement dans une chaîne courte, l'ordre des fonctions change le résultat, et les fonctions 3 D ont une dépendance qui est invisible jusqu'à ce que vous l'atteigniez Une valeur que vous pouvez voir être construite vaut bien plus qu'une valeur que vous devez imaginer.
le Générateur de transformation CSS vous donne un curseur pour chaque fonction, translate, rotative, scale, skew et le trio 3 D de rotateX, rotateY et perspective, et applique chaque modification à un élément de prévisualisation en direct au fur et à mesure qu'il le fait Il vous permet également de définir la transformation-origine, le point d'ancrage autour duquel pivotent les rotations et la mise à l'échelle La déclaration exacte se trouve dans une boîte prête à copier ci-dessous, contenant uniquement les fonctions que vous avez touchées.
tl;dr : Le CSS
transformpropriété repositionne et remodèle un élément sans affecter la mise en page, ce qui en fait le bon outil pour les effets de survol et l'animation Les fonctions s'appliquent de droite à gauche, donc l'ordre compte ; les rotations 3 D ont besoin d'unperspective()pour avoir l'air en trois dimensions ; et tout élément transformé devient un bloc contenant pour ses enfants fixes et absolus Ce générateur expose chaque fonction avec un aperçu en direct, émet uniquement les fonctions que vous changez et produit un CSS propre que vous pouvez coller directement dans une feuille de style Il fonctionne entièrement dans votre navigateur sans inscription.
Quel problème un générateur de transformation CSS résout-il ?
le transform la propriété est abstraite de la même manière que CSS Grid est abstraite. Vous ne déplacez pas directement les pixels ; vous décrivez une opération géométrique et laissez le navigateur calculer le résultat. translateX(40px) rotate(15deg) scale(1.1) est une instruction précise, mais il n'y a aucun moyen de ressentir le résultat de l'enchaînement de ces trois-là à partir du texte seul Vous devez le restituer Et le rendre dans votre propre projet signifie la boucle d'écriture-enregistrement-actualisation, qui est suffisamment lente pour que la plupart des gens arrêtent d'expérimenter bien avant d'avoir trouvé la valeur qu'ils veulent.
Un générateur fait s'effondrer cette boucle à néant Vous faites glisser le curseur de rotation et la boîte tourne en temps réel Vous élevez l'échelle et elle grandit de son centre Vous ajoutez une translation et elle glisse en gardant son tour Dix minutes de ceci et la relation entre les nombres et le mouvement cesse d'être quelque chose que vous traduisez dans votre tête et devient quelque chose que vous ressentez Quand vous avez terminé, il n'y a rien à transcrire, car le CSS de travail a été écrit pour vous tout le temps.
Il y a un deuxième avantage qui compte plus qu'il n'y paraît Construire la transformée par manipulation signifie que l'outil ne peut jamais émettre que des CSS valides et bien formés Vous ne pouvez pas produire un CSS cassé transform valeur en faisant glisser un curseur, de sorte que la sortie est toujours sûre à coller Cette fiabilité est la raison pour laquelle je garde une étagère de constructeurs visuels CSS proche, la même raison que j'atteins pour le générateur d'ombres-boîtes plutôt que de compter les compensations d'ombres à la main.
Pourquoi l'ordre des fonctions de transformation est-il important ?
C'est le seul détail qui fait le plus trébucher les gens, et il vaut la peine d'être compris plutôt que de travailler autour Lorsque vous énumérez plusieurs fonctions en une transform4, le navigateur les applique de droite à gauche, chacun fonctionnant dans l'espace de coordonnées laissé par le précédent. Cela signifie que l’ordre change véritablement là où se trouve l’élément.
Prendre translateX(100px) rotate(45deg) contre rotate(45deg) translateX(100px). Dans le premier, l'élément est translaté d'une centaine de pixels puis tourné en place, donc il se trouve à une centaine de pixels à droite et tourné de quarante-cinq degrés Dans le second, la rotation se produit en premier, ce qui fait tourner les axes de coordonnées element' ; s, et la translate le déplace ensuite de cent pixels le long du tourné Axe X, l'envoyant en diagonale vers le bas et vers la droite. Deux mêmes fonctions, deux mêmes valeurs, des positions complètement différentes.
Le générateur émet ses fonctions dans un ordre délibéré, perspective d'abord, puis traduire, puis faire pivoter, puis évoluer, puis biaiser, ce qui est un défaut sensible qui maintient les cas courants se comportant intuitivement Mais une fois que vous comprenez que l'ordre est significatif, vous comprenez aussi pourquoi copier une transformée d'un endroit à un autre produit parfois un résultat auquel vous ne vous attendiez pas : vous avez déplacé la chaîne mais pas le modèle mental derrière elle Construisez-la vous-même, et voir chaque fonction' ; contribution, c'est comment ce modèle se construit.
Comment puis-je faire en sorte qu'une transformation 3 D ait l'air 3 D ?
Voici le piège qui m'a coûté cet après-midi-là Les fonctions rotateX et rotateY tournez un élément autour des axes horizontal et vertical, qui devrait le faire basculer vers ou loin de vous comme une page qui tourne Mais par défaut il n'y a pas de profondeur dans la scène, donc la rotation est projetée tout droit sur le plan plat de l'écran et l'élément semble simplement se comprimer A rotateY(60deg) sans perspective, on dirait que l’élément est devenu plus étroit, pas comme s’il tournait.
L'ingrédient manquant est perspective[TRADUCTION], et il y a deux façons de le fournir Vous pouvez mettre un perspective propriété sur l'élément parent, qui établit un point de fuite partagé pour tous ses enfants 3 D, ou vous pouvez ajouter un perspective() fonction au tout début de l'élément' ;s propre transform[traduction], ce qui donne à cet élément sa propre profondeur Ce générateur utilise la deuxième approche : définir le curseur de perspective et il émet perspective() d'abord dans la chaîne, exactement là où il doit être Des valeurs plus petites, quelque part entre trois cent et six cents pixels, placent le point de fuite près de l'élément et rendent la profondeur dramatique ; des valeurs plus grandes aplatissent l'effet vers une légère inclinaison.
La carte 3 D préréglée dans l'outil est le moyen le plus rapide de voir cela Il définit une perspective de six cents pixels et un rotateY de vingt-cinq degrés, et la boîte d'aperçu se pointe de manière convaincante dans l'écran Retournez le curseur de perspective à zéro et regardez la même rotation s'effondrer en une courge plate. Cet avant-après est toute la leçon en deux parties.
Que fait transform-origin ?
Chaque rotation et chaque échelle a besoin d'un point fixe pour pivoter, et ce point est l'origine de la transformation. Par défaut, il se situe au point mort de l'élément, c'est pourquoi un élément non modifié rotate tourne une boîte autour de son milieu et d'un non modifié scale le fait pousser vers l'extérieur dans toutes les directions à la fois Déplacer l'origine et les deux comportements changent.
Définissez l'origine sur top left et une rotation devient un swing, l'élément pivotant de son coin supérieur gauche comme un panneau articulé Réglez-le sur bottom et un scaleY fait croître l'élément vers le haut à partir de sa base plutôt que de l'étendre symétriquement, ce qui est exactement ce que vous voulez pour une barre qui devrait s'élever à partir de l'axe d'un graphique Le générateur offre les neuf positions de mots clés, le centre, les quatre arêtes et les quatre coins, et met à jour l'aperçu à l'instant où vous en choisissez un, donc la différence entre un spin et un swing est à un clic l'un de l'autre.
C'est l'une de ces propriétés qui est presque invisible jusqu'à ce que vous en ayez besoin, et puis c'est la seule chose qui produit l'effet que vous recherchez. Un menu qui doit se déployer depuis son bord supérieur, une info-bulle qui doit évoluer hors de l'élément auquel elle appartient, une carte qui doit tourner autour d'un coin plutôt que vers son milieu, tous sont d'origine transformée, et aucun d'entre eux n'est évident transform valeur seule.
Pourquoi la transformation ne pousse-t-elle pas d’autres éléments ?
Une des propriétés les plus utiles de transform est aussi celui que les gens trouvent le plus surprenant la première fois qu'il les mord Un élément transformé n'affecte pas la disposition autour de lui Lorsque vous traduisez une boîte de quarante pixels vers la droite, il rend quarante pixels vers la droite, mais il réserve toujours son espace d'origine dans le flux du document, donc rien d'autre ne bouge pour combler le vide et rien n'est écarté La transformation est un effet de temps de peinture, appliqué après que la mise en page a déjà été calculée.
C'est une fonctionnalité, pas un bug, et c'est précisément ce qui fait de transformer le bon outil pour l'animation Parce que déplacer un élément avec transform ne déclenche pas de refusion, le navigateur peut composer le changement sur le GPU et maintenir l'animation à soixante images par seconde. Déplacer le même élément avec top ou left ou margin force le navigateur à recalculer la mise en page sur chaque image, ce qui est la cause d'animation la plus courante qui bégaie et laisse tomber les images Si vous voulez un mouvement fluide, vous animez transform et opacity« , et vous laissez les propriétés de mise en page tranquilles. Lorsque vous avez besoin du contenu environnant pour reflower, c'est un signe que vous souhaitez un changement de mise en page plutôt qu'une transformation, et un outil comme le » flexbox générateur ou le Générateur de grille CSS est le bon endroit pour commencer.
Pourquoi un enfant fixe s'est-il brisé à l'intérieur de mon élément transformé ?
C'est le gotcha qui ressemble à un bug dans quelque chose sans rapport, et il vaut la peine de le savoir avant que cela ne vous coûte une heure La spécification dit que tout élément avec un transform valeur autre que none devient un bloc contenant pour ses descendants qui sont positionnés fixed ou absolute4, et cela crée également un nouveau contexte d’empilement. Ces deux éléments ont des conséquences qui font surface loin de la transformation elle-même.
Le changement de bloc contenant est celui qui surprend les gens. UN position: fixed element est censé s'ancrer à la fenêtre, en restant mis pendant que la page défile. Mais si un ancêtre de cet élément fixe a une transformation, l'élément fixe s'ancre cet ancêtre au lieu de cela, et tout à coup votre " ; fixe" ; l'en-tête défile avec le contenu ou votre modal est piégé à l'intérieur d'une carte Rien dans la transformation' ; son apparence laisse entendre cela ; l'élément semble bien, et quelque chose de trois niveaux se positionne mal Lorsqu'un élément fixe ou absolu se comporte comme s'il était piégé, la première chose à vérifier est si un ancêtre porte une transformation Le changement de contexte d'empilement provoque une classe parallèle de confusion, où a z-index ce qui fonctionnait soudainement ne fonctionne pas, car l'élément transformé scellait ses enfants dans leur propre couche d'empilage. Le même comportement s’applique exactement au filter propriété, c'est pourquoi le Générateur de filtres CSS porte le même avertissement.
Quelles fonctions couvre le générateur, et quand atteignez-vous chacune ?
L'outil expose l'ensemble complet des fonctions de transformation communes, et il aide à savoir à quoi chacune sert plutôt que de les faire glisser au hasard Voici la carte.
| Fonction | Ce qu'il fait | Usage typique |
|---|---|---|
translateX / translateY |
Déplace l'élément selon un axe | Entrées coulissantes, hover nudges, positionnement décalé |
rotate |
Tourne l'élément autour de son centre (2D) | Insignes inclinés, chargeuses tournantes, angles de vol stationnaires ludiques |
scale (X et Y) |
Fait croître ou rétrécit l'élément | Zoom de survol, effets pop, retour d'appui |
skewX / skewY |
Incline l'élément le long d'un axe | Bannières dynamiques, formes de style italique, indices de mouvement |
rotateX / rotateY |
Tourne l'élément dans l'espace 3D | Retours de carte, panneaux basculants, effets de couverture-flux |
perspective |
Ajoute de la profondeur pour que les rotations 3 D se lisent correctement | Toujours associé à rotateX ou rotateY |
Les deux qui ont besoin d'un partenaire sont les rotations 3 D, qui ne font rien de convaincant sans perspective, et une échelle négative, qui vaut la peine d'être appelée parce qu'elle n'est pas évidente. Réglage scaleX vers une valeur négative retourne l'élément horizontalement, comme un miroir, c'est ainsi que fonctionne le préréglage Flip Horizontal C'est une astuce véritablement utile, reflétant une icône plutôt que d'exporter un deuxième actif, et il tombe tout droit hors du contrôle d'échelle une fois que vous savez que les valeurs négatives sont autorisées.
Comment le générateur garde-t-il l'aperçu honnête ?
Le mode d'échec de tout constructeur visuel est la dérive entre ce que l'aperçu montre et ce que produit le code exporté Un outil qui rend son aperçu dans un sens et écrit son CSS dans un autre est pire que pas d'outil du tout, car il vous enseigne une valeur qui ne se reproduira pas Ce générateur évite cela en construisant le style en ligne preview' ; s et la déclaration copiée à partir de la même fonction, donc ce que vous voyez est littéralement ce que vous collez Il n'y a pas de deuxième chemin de code qui pourrait être en désaccord.
C'est aussi pourquoi la sortie contient uniquement les fonctions que vous avez modifiées. En partant scale à son identité d'un, ou rotate à zéro, cela signifie que ces fonctions sont simplement absentes de la chaîne plutôt que écrites comme redondantes scale(1) bruit. Une transformation propre est une transformation que vous pouvez lire d'un seul coup d'œil et en qui vous avez confiance, et émettre uniquement des fonctions significatives est la même discipline sur laquelle je m'appuie sur les outils visuels CSS, du générateur gradient au constructeur box-shadow Si vous assemblez un kit plus large, le Boîte à outils pour les développeurs Web collecte ceux que j'ouvre le plus souvent, et les habitudes derrière leur utilisation sont dans le Outils de productivité des développeurs guide.
Quels navigateurs prennent en charge les transformations CSS ?
Les transformations CSS sont prises en charge dans tous les navigateurs actuels et ce depuis plus d'une décennie. Les fonctions 2 D, translate, rotative, scale et skew, sont universelles et non préfixées, et les fonctions 3 D avec perspective sont également bien pris en charge dans Chrome, Firefox, Safari et Edge. L'ancien -webkit- et -moz- les préfixes qui étaient autrefois nécessaires sont le poids mort dans une feuille de style aujourd'hui, et la sortie de ce générateur est un CSS standard non préfixé que vous pouvez expédier tel qu'écrit Pour les règles faisant autorité, les spécifications CSS Transforms Module Level 1 et Level 2 du W3 C sont les sources principales, et elles valent la peine d'être lues une fois que le générateur vous a donné l'intuition de les suivre.
Si vous construisez parallèlement une boîte à outils visuelle plus large, le générateur de rayon frontière et le constructeur de transition sont des compagnons naturels, puisqu'une transformation sur le vol stationnaire veut presque toujours une transition pour le lisser Tout ici fonctionne côté client, et le CSS que vous copiez est à vous d'utiliser sans runtime, sans étape de construction et sans dépendance.
Questions fréquentes
Qu'est-ce qu'un générateur de transformation CSS ?
Un générateur de transformation CSS est un outil visuel qui construit une valeur de transformation CSS à partir des paramètres que vous choisissez Vous ajustez la traduction, la rotation, l'échelle, l'asymétrie et la perspective 3 D avec des curseurs, et il génère la déclaration de transformation ainsi qu'un aperçu en direct du résultat.
L'ordre des fonctions de transformation est-il important ?
Oui. Les fonctions sont appliquées de droite à gauche dans le système de coordonnées des éléments, donc translate puis rotate n'est pas la même chose que rotate puis translate La traduction déplace d'abord l'élément puis le fait tourner en place ; la rotation fait d'abord tourner les axes, donc une translation ultérieure l'envoie selon un angle.
Comment puis-je donner à une transformation CSS un aspect 3 D ?
Une rotation 3 D a besoin de perspective pour lire comme profondeur Ajoutez une fonction de perspective (s) au début de la transformée, que ce générateur émet lorsque vous définissez le curseur de perspective, ou mettez une propriété de perspective sur l'élément parent Les valeurs autour de 300 à 600 pixels rendent la profondeur la plus spectaculaire.
Que fait transform-origin ?
transform-origin définit le point sur lequel pivote une transformation et évolue. La valeur par défaut est le centre de l'élément. Déplacez-le vers un coin et une rotation devient un swing à partir de ce coin ; déplacez-le vers un bord et la mise à l'échelle se développe à partir de ce bord plutôt que vers l'extérieur dans toutes les directions.
Pourquoi transform ne déplace pas d'autres éléments sur la page ?
La transformation est un effet de temps de peinture L'élément rend dans sa nouvelle position mais réserve toujours sa boîte d'origine dans la mise en page, donc rien autour de lui ne change C'est ce qui rend la transformation idéale pour l'animation, et pourquoi vous utilisez la marge, la position ou une propriété de mise en page lorsque vous avez besoin de contenu pour reflow.
Pourquoi un enfant fixe ou absolu se brise-t-il à l'intérieur d'un élément transformé ?
Tout élément avec une transformation autre que nulle devient un bloc contenant pour ses descendants fixes et absolument positionnés et crée un nouveau contexte d'empilement Une position : enfant fixe s'ancre alors au parent transformé au lieu de la fenêtre, et l'ordre des indices z peut changer Déplacer l'enfant hors de l'élément transformé s'il doit rester fixé à l'écran.
Dois-je animer la transformation au lieu de haut, gauche, largeur ou hauteur ?
Oui, pour un mouvement fluide. la transformation et l'opacité sont composées sur le GPU et ne déclenchent pas la mise en page, elles s'animent donc à 60 ips. L'animation en haut, à gauche, en largeur ou en hauteur oblige le navigateur à recalculer la mise en page sur chaque image, ce qui est la cause habituelle de l'animation branlante.
La transformation générée CSS est-elle gratuite et sûre à utiliser ?
Oui. L'outil est entièrement gratuit sans limites d'inscription ou d'utilisation, et il émet un CSS standard non préfixé pris en charge dans chaque navigateur moderne. Tous les traitements ont lieu dans votre navigateur, donc rien n'est téléchargé et l'outil fonctionne hors ligne une fois chargé.
