Gerador de transformações CSS

Construa interativamente uma declaração transform com controles deslizantes para translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y) e skew (X/Y), além de um transform-origin editável e um tamanho de caixa de visualização ajustável. O CSS gerado usa translate3d para translação, combina scale/rotate/rotateX/rotateY/skew apenas quando alterados e os emite junto com transform-origin.

1. Arraste os controles deslizantes em Translate, Scale, Rotate e Skew para compor um transform; cada valor também possui um campo numérico para entrada precisa. 2. Ajuste o Box Size da visualização (50–250px) e edite o Transform-Origin (qualquer string CSS de origem, padrão 50% 50%). 3. Clique em Reset para retornar todos os valores aos seus padrões neutros. 4. Clique em Copy para copiar tanto a declaração transform: ... quanto transform-origin: ....

translateX/Y/Z: de -200 a 200 px, emitidos juntos como translate3d(x, y, z) quando algum é diferente de zero. scaleX/Y: de 0,1 a 3, emitidos como scale(x, y) quando algum difere de 1. rotate (Z): de -360 a 360deg. rotateX/Y: de -180 a 180deg. skewX/Y: de -60 a 60deg, emitidos como skew(x, y) quando algum é diferente de zero. Se nenhuma função for alterada, a saída será transform: none.