Gerador de transformação CSS

Compor e copiar uma transformação 2D

1. Edite a rotação inicial ou adicione uma função de transformação. Escolha unidades para tradução, ative ou desative linhas e duplique-as ou mova-as na ordem escrita CSS.
2. Defina a origem X e Y em pixels ou porcentagens. A caixa de borda de amostra tem 120 por 60 pixels CSS; os valores percentuais usam essas dimensões originais antes da transformação.
3. Inspecione o CSS atual e a visualização ilustrativa e, em seguida, use Copiar CSS. Rascunhos ativos inválidos retêm CSS e o destino transformado. Clear remove as funções; Redefinir restaura a rotação inicial e a origem centralizada.

Ordem, origem e dimensões de referência

A lista está escrita na ordem CSS. Por certo ponto, sua função mais à direita atua primeiro. Mover uma rotação antes ou depois de uma translação pode, portanto, alterar o resultado mesmo quando ambos os valores permanecem iguais.

A saída declara transform-box: border-box e a origem da transformação atual. A tradução percentual e a origem usam a caixa de borda não transformada do elemento, não seu pai, o quadro de visualização ou seus limites transformados.

Os valores de origem dos pixels já são distâncias. Uma origem horizontal de 50% na amostra é resolvida como 120 pixels vezes 50 dividido por 100, resultando em 60 pixels; verticalmente, 60 vezes 50 dividido por 100 dá 30 pixels. Um tamanho de alvo diferente altera a geometria percentual.

Uma função de identidade explícita permanece na saída. Ele pode reter efeitos de empilhamento e bloco contido relacionados à transformação, mesmo quando os pontos não se movem. Uma lista vazia ou totalmente desativada não emite nenhum.

Exemplos de composição

Com origem no canto superior esquerdo, translate(30px, -10px) rotate(90deg) mapeia o ponto de referência (4, 5) para (25, -6). A rotação atua no ponto anterior à translação escrita. Inverter as linhas dá (5, 34).

Em uma caixa de borda de 240 por 80 pixels, translate(-25%, 150%) significa um deslocamento de -60 e 120 pixels. As porcentagens ainda são resolvidas na caixa antes de uma rotação circundante.

skew(45deg, -45deg) difere de skewX(45deg) skewY(-45deg). A escala negativa pode refletir a amostra, enquanto a escala zero ou outra transformação singular pode fazê-la desaparecer sem invalidar o CSS de autoria.

Escopo e limites de visualização

Esta é uma ferramenta de autoria 2D limitada. Não possui perspectiva, 3D, animação, importação arbitrária de CSS, upload de imagem ou calculadora de matriz completa. Os intervalos numéricos e três casas decimais são limites da ferramenta, e não toda a gramática CSS.

A visualização pode dimensionar uniformemente seu quadro fixo para o cartão e recortar o conteúdo fora desse quadro. Não cabe em todos os limites transformados. Escala de quadro, guias e dimensões de amostra não são adicionadas ao CSS copiado.

Transforma a alteração da pintura em vez de reorganizar o layout normal. Diferentes dimensões do elemento, conteúdo e CSS circundante podem alterar o resultado. Composições extremas ou quase singulares também dependem da renderização nativa de ponto flutuante.

A saída preserva linhas habilitadas, unidades e identidades explícitas, sem combiná-las ou convertê-las em uma matriz computada. A entrada ou origem ativa inválida retém CSS e Copiar atuais em vez de mostrar um último resultado válido como atual.

Estilo local sem histórico salvo

A ferramenta não adiciona upload, histórico de estilo salvo, link de entrada ou telemetria contendo seus valores de autoria. Os serviços e extensões de sites existentes estão fora da promessa universal de privacidade. A cópia é explícita; um novo documento inicia os padrões.