Propriedade Transform Origin
Última atualização: 2026-09-13
transform-origin Propriedade Transform Origin
A propriedade transform-origin define o ponto — a origem — em torno do qual um elemento é transformado. O padrão é o centro do elemento (50% 50%), e rotações, escalas e inclinações são todos executados em torno desse ponto. Ajustando a origem, você pode criar efeitos muito diferentes, como girar em torno de uma borda ou escalar a partir de um canto.
| Categoria | |
|---|---|
| Valor Inicial | 50% 50% 0 |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
transform-origin: [<length> | <percentage> | left | center | right] [<length> | <percentage> | top | center | bottom] [<length>];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | <percentage> | Tipo | As coordenadas da origem da transformação |
left | center | right | top | bottom | Palavra-chave | Uma posição predefinida |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| Suportado em todos os principais navegadores | |||||
Dica： O terceiro valor (a origem do eixo Z) só surte efeito em transformações 3D e geralmente é combinado com perspective; transformações 2D precisam apenas dos dois primeiros valores.
Dica： Palavras-chave como left/center/right e top/center/bottom são mais intuitivas; use porcentagens ou valores de comprimento quando precisar de controle preciso.
❓ Perguntas Frequentes
QPor que meu elemento parece deslizar quando gira em torno do centro?
APor padrão, a origem da transformação fica no centro geométrico do elemento, então rotate gira em torno do centro. Para girar em torno de um de seus cantos ou bordas, mova a origem para lá — por exemplo, transform-origin: top left; faz o elemento girar em torno de seu canto superior esquerdo, produzindo efeitos como uma porta abrindo ou uma pá de ventilador.
QA propriedade transform-origin afeta a translação ou translate?
ANão. translate move o elemento inteiro e não tem relação com a origem; a origem afeta apenas transformações que acontecem em torno de um ponto, como rotate, scale e skew. Assim, em transform: translate(30px) rotate(45deg), o resultado da translação não é afetado por transform-origin, mas o centro visual da rotação e da escala segue a origem.
QA que se referem os valores em porcentagem de transform-origin em CSS?
AAs porcentagens são calculadas em relação às próprias dimensões do elemento. 0% 0% é o canto superior esquerdo, 50% 50% é o centro e 100% 100% é o canto inferior direito — por exemplo, transform-origin: 100% 50% usa o meio da borda direita. Você também pode usar as palavras-chave left, center, right, top e bottom, ou valores de comprimento como px para posicionamento preciso.
Qtransform-origin pode ser usado em transformações 3D? Como funciona o terceiro valor?
ASim. Os dois primeiros valores definem a origem no plano X/Y e o terceiro (um comprimento) define a origem do eixo Z, cujo padrão é 0. Por exemplo, transform-origin: 50% 50% -20px move a origem 20px atrás do elemento, dando a rotateX uma sensação de profundidade diferente. Em cenas 3D, o elemento pai também precisa de uma perspective para o efeito ser visível.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
