A propriedade CSS transform-origin

Definição e uso

A propriedade transform-origin permite que você altere a posição do elemento convertido.

Elementos de conversão 2D podem alterar o eixo x e y do elemento. Elementos de conversão 3D também podem alterar seu eixo Z.

Para entender melhor a propriedade transform-origin, veja essaDemonstração.

Usuários do Safari/Chrome: Para entender melhor o uso da propriedade transform-origin em transformações 3D, veja essaDemonstração.

Observação:Esta propriedade deve ser usada com transform propriedade.

Para entender melhor a propriedade transform, veja essaDemonstração.

Veja também:

Tutorial do CSS3:Transformação 2D do CSS3

Tutorial do CSS3:Transformação 3D do CSS3

Manual do HTML DOM:Atributo transformOrigin

Exemplo

Defina a posição de base do elemento girado:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Experimente você mesmo

Mais exemplos na parte inferior da página.

Sintaxe do CSS

transform-origin: eixo X eixo Y eixo Z;

Valor do atributo

Valor Descrição
eixo X

Define onde o vista é colocado no eixo X. Valores possíveis:

  • esquerda
  • centro
  • direita
  • length
  • %
eixo Y

Define onde o vista é colocado no eixo Y. Valores possíveis:

  • superior
  • centro
  • inferior
  • length
  • %
eixo Z

Define onde o vista é colocada no eixo Z. Valores possíveis:

  • length

Detalhes técnicos

Valor padrão: 50% 50% 0
Herança: não
Versão: CSS3
Sintaxe do JavaScript: object.style.transformOrigin="20% 40%"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o atributo.

Números com -webkit-、-moz- ou -ms- indicam a primeira versão com prefixo usada.

Atributo Chrome IE Firefox Safari Opera
transform-origin
(Gramática de dois valores)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(Gramática de três valores)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-