Gerador de Transformação CSS

Transformações em 2D atuam apenas nos eixos X e Y, afetando as dimensões largura e altura. Incluem rotação, escala, inclinação (skew) e translação. Transformações em 3D adicionam o eixo Z para profundidade, permitindo que elementos pareçam girar no espaço tridimensional. Propriedades como rotateX e rotateY inclinam os elementos para frente ou para trás do observador. As transformações em 3D exigem um valor de perspectiva na ancestral ou no elemento para criar a ilusão de profundidade. Sem perspectiva, as rotações em 3D parecem planas. Tanto transformações em 2D quanto em 3D podem ser combinadas em uma única propriedade de transformação.

A origem de transformação define o ponto em torno do qual as transformações são aplicadas. Por padrão, ela é o centro do elemento (50% 50%). Mudá-la para canto superior esquerdo (0% 0%) faz com que rotações girem a partir do canto em vez do centro. Isso altera drasticamente como as transformações de rotação, escala e deslocamento aparecem. Por exemplo, girar 45 graus em torno do centro faz com que o elemento gire no lugar, enquanto girar a partir do canto superior esquerdo faz com que ele se mova como uma porta. A origem aceita palavras-chave (canto superior, centro, canto inferior, esquerda, direita), porcentagens ou valores de pixel para controle preciso.

A perspectiva define a distância entre o observador e o plano Z, criando a ilusão de profundidade para transformações em 3D. Um valor menor, como 200px, cria uma perspectiva extrema próxima onde os efeitos tridimensionais parecem dramáticos e distorcidos. Um valor maior, como 2000px, cria uma perspectiva distante e sutil. A perspectiva pode ser definida no elemento pai como propriedade (perspective: 800px) ou no próprio elemento através de uma função de transformação (transform: perspective(800px)). O método do elemento pai é preferido quando vários elementos filhos compartilham o mesmo espaço tridimensional.

Em 2026, prefixos de vendedores para transformações CSS são raros. A propriedade transformo sem prefixo é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e navegadores móveis. O prefixo `-webkit-transform` era necessário para versões mais antigas do Safari e iOS antes da versão 9 do Safari (2015). Se precisar de suporte para navegadores muito antigos, esse gerador pode incluir prefixos de vendedores como comentários na saída. Para a maioria dos projetos voltados para navegadores atuais, a versão sem prefixo é suficiente e o código fica mais limpo sem os prefixos.