Neuf réglages définissent translate, scale, rotate, skew et l’origine de la transformation. La scène se redessine à chaque frappe et Copier CSS place une déclaration transform propre dans le presse-papiers.
Fonctionne localement dans votre navigateurNeuf réglages pilotent une transformation 2D : translateX et translateY en px (-240 à 240), scaleX et scaleY (-3 à 3), rotate (-360 à 360 degrés), skewX et skewY (-89 à 89 degrés) et les pourcentages transform-origin X et Y (0 à 100). Chaque frappe redessine la carte sur la scène, et le panneau de code contient exactement la chaîne que Copier CSS place dans le presse-papiers.
L’export compose les fonctions dans un ordre fixe (translate, puis rotate, puis skew, puis scale) et retire celles qui restent à leur valeur d’identité : une page intacte exporte donc transform: none. Une mesure dans le navigateur a confirmé que la chaîne réduite produit la même matrice que la chaîne complète : translate(77px, 0px) seul et translate(77px, 0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1) donnent tous deux matrix(1, 0, 0, 1, 77, 0).
L’atelier écrit translate(...) d’abord, puis rotate(...), puis skew(...), puis scale(...). Les fonctions encore à leur valeur d’identité sont omises : une modification de translation seule exporte transform: translate(77px, 0px) ; et quand rien n’est défini, le bloc vaut transform: none; sans ligne transform-origin.
L’ordre compte. Dans la mesure navigateur, translate(100px, 0px) rotate(45deg) calcule matrix(0.707107, 0.707107, -0.707107, 0.707107, 100, 0), tandis que rotate(45deg) translate(100px, 0px) calcule matrix(0.707107, 0.707107, -0.707107, 0.707107, 70.7107, 70.7107) : placée en second, la translation est entraînée par la rotation.
Décalage -240 à 240 px, échelle -3 à 3, rotation -360 à 360 degrés, inclinaison -89 à 89 degrés et origine 0 à 100 %. Pendant la saisie, l’aperçu reste dans ces bornes ; à la sortie du champ, le nombre borné remplace le texte saisi : 999 dans l’origine Y enregistre 100 %, et -300 dans translateX enregistre -240 px.
Les neuf champs acceptent n’importe quel pas, donc l’échelle 1.04 du préréglage Tilt n’est pas signalée comme invalide. L’inclinaison s’arrête à 89 degrés car tan(90 degrés) n’est pas bornée, et le repère d’origine ne peut pas quitter la carte puisque l’origine reste entre 0 et 100 %.
La page est bidimensionnelle : pas de translateZ, rotateX/rotateY, perspective ni saisie matrix(), et la scène ne porte qu’un seul élément. Le sélecteur est fixe (.transformed-element) et le panneau exporte une déclaration transform plus un transform-origin facultatif ; aucune sortie pour media query ni variable CSS.
Tout s’exécute dans la page. Parcourir les neuf champs, les trois préréglages non standards, Copier CSS et Réinitialiser n’a produit aucune requête réseau dans la mesure ; seule la balise d’analyse partagée se charge. Sur une fenêtre de 390px, la carte mesure 118x118 (150x150 sur ordinateur) avec le même repère de 12px et sans débordement horizontal.