Exemplo
Definir colocação base de um elemento girado:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Tente você mesmo " Definição e Uso
A propriedade transform-origin permite alterar a posição de elementos transformadas.
transformações 2D pode mudar o x e eixo y de um elemento. transformações 3D também pode alterar o eixo z de um elemento.
Para entender melhor a propriedade transform-origin, ver uma demonstração .
Note: Esta propriedade deve ser usado em conjunto com a transformar a propriedade.
Tip: Para entender melhor essa propriedade para a transforma em 3D, ver uma demonstração .
| Valor padrão: | 50% 50% 0 |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.transformOrigin="0 0" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36,0 4.0 -webkit- | 10.0 9,0 -ms- | 16,0 3,5 -moz- | 9 3.2 -webkit- | 23,0 15,0 -webkit- 10,5 -o- |
| transform-origin (three-value syntax) | 36,0 12,0 -webkit- | 10.0 | 16,0 10,0 -moz- | 9 4.0 -webkit- | 23,0 15,0 -webkit- |
CSS Syntax
transform-origin:x-axis y-axis z-axis|initial|inherit;Valores de propriedade
| Valor da propriedade | Descrição |
|---|---|
| x-axis | Define onde o ponto de vista é colocado no eixo-x. Valores possíveis:
|
| y-axis | Define onde o ponto de vista é colocado no eixo y. Valores possíveis:
|
| z-axis | Define onde o ponto de vista é colocado no eixo z (for 3D transformations) . Valores possíveis:
|
| inicial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| herdar | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS: CSS 2D Transformadas
Tutorial CSS: transformações CSS 3D
HTML DOM de referência: transformOrigin property