Simulando a origem da transformação com tradução: um guia abrangente

Compreendendo a origem da transformação

A propriedade Transform-origin especifica o ponto em torno do qual um elemento se transforma. Definir esta propriedade nos permite controlar a rotação, dimensionamento ou inclinação de um elemento com maior precisão.

Simulando Transform-Origin com Translate

A documentação oficial para CSS afirma que a origem da transformação pode ser simulada usando a transformação de tradução. O processo é o seguinte:

• Traduza o elemento pelo valor negado da propriedade transform-origin.
• Aplique a transformação desejada (por exemplo, dimensionar, girar).
• Traduza o elemento de volta pelo valor da propriedade transform-origin.

Solução de problemas de resultados incorretos

Se você tentar simular transform-origin com falha na tradução, você pode ter encontrado um de dois erros comuns:

Erro 1: ordem de tradução incorreta

A simulação da origem da transformação envolve três operações de tradução: a inicial negada tradução, a transformação desejada e a tradução positiva final. É crucial executar essas traduções na ordem correta.

Exemplo:

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

Neste exemplo, a tradução inicial está correta, mas a tradução final deve ser translate(100px, 100px) em vez de translate(-100px, -100px) para negar a tradução inicial e restaurar o elemento ao seu posição original.

Erro 2: origem de transformação incompatível

Garanta que tanto o elemento original com origem de transformação quanto o elemento simulado com tradução tenham a mesma origem de transformação . A origem da transformação padrão é o centro do elemento e é crucial defini-la explicitamente em ambos os casos ou deixá-la como padrão.

Exemplo:

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

Aqui, a origem da transformação foi explicitamente definida no canto superior esquerdo do elemento, que corresponde à origem da transformação padrão do elemento original.

Conclusão

Ao corrigir esses erros e garantir a ordem de tradução e a origem da transformação adequadas, você pode simular efetivamente a origem da transformação usando a transformação de tradução. Esta técnica abre várias possibilidades criativas para manipulação de elementos e animação em CSS.