Nove controles definem translate, scale, rotate, skew e a origem da transformação. O palco é redesenhado a cada tecla e Copiar CSS coloca uma declaração transform limpa na área de transferência.
Funciona localmente no seu navegadorNove controles comandam uma transformação bidimensional: translateX e translateY em px (-240 a 240), scaleX e scaleY (-3 a 3), rotate (-360 a 360 graus), skewX e skewY (-89 a 89 graus) e os percentuais de transform-origin X e Y (0 a 100). Cada tecla redesenha o cartão do palco, e o painel de código contém a string exata que Copiar CSS coloca na área de transferência.
A exportação compõe as funções numa ordem fixa (translate, rotate, skew e scale) e remove as que continuam no valor identidade, então uma página intocada exporta transform: none. Um teste no navegador confirmou que a string reduzida gera a mesma matriz que a completa: translate(77px, 0px) sozinho e translate(77px, 0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1) resultam em matrix(1, 0, 0, 1, 77, 0).
A bancada escreve translate(...) primeiro, depois rotate(...), depois skew(...) e por fim scale(...). Funções que continuam na identidade ficam fora da exportação: uma edição só de translação exporta transform: translate(77px, 0px); e quando nada está definido o bloco é transform: none; sem linha transform-origin.
A ordem importa. No teste do navegador, translate(100px, 0px) rotate(45deg) calculou matrix(0.707107, 0.707107, -0.707107, 0.707107, 100, 0), enquanto rotate(45deg) translate(100px, 0px) calculou matrix(0.707107, 0.707107, -0.707107, 0.707107, 70.7107, 70.7107): a translação gira junto com o elemento quando vem em segundo lugar.
Deslocamento de -240 a 240 px, escala de -3 a 3, rotação de -360 a 360 graus, inclinação de -89 a 89 graus e origem de 0 a 100 %. Enquanto você digita, a prévia permanece dentro desses limites; ao sair do campo, o número limitado substitui o texto digitado, então 999 na origem Y salva 100 % e -300 em translateX salva -240 px.
Os nove campos aceitam qualquer passo, então a escala 1.04 do predefinido Tilt não é marcada como inválida. A inclinação para em 89 graus porque tan(90 graus) é ilimitada, e o marcador de origem não sai do cartão porque a origem nunca deixa 0-100 %.
A página é bidimensional: não há translateZ, rotateX/rotateY, perspectiva nem entrada matrix(), e o palco tem um único elemento. O seletor é fixo (.transformed-element) e o painel exporta uma declaração transform mais um transform-origin opcional; não há saída para media queries ou variáveis CSS.
Tudo roda na página. Percorrer os nove campos, os três predefinidos não padrão, Copiar CSS e Redefinir não gerou nenhuma requisição de rede no teste; apenas a tag de analítica compartilhada é carregada. Numa janela de 390px o cartão mede 118x118 (150x150 no desktop) com o mesmo marcador de origem de 12px e sem estouro horizontal.