Transformações

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript para Windows 8 são compatíveis com as transformações 3D de CSS3 (Folhas de Estilos em Cascata, Nível 3). O Windows Internet Explorer 9 agora é compatível com as transformações 2D de CSS3, e os aplicativos da Windows Store em JavaScript também são. As transformações permitem conversão, rotação e dimensionamento de elementos em espaços 2D e 3D, sem a necessidade de um plug-in. As transformações 3D  CSS3 são definidas pelo W3C (World Wide Web Consortium) na especificação Transformações CSS, que atualmente está no estágio de Versão Preliminar de Trabalho.

Observação  É uma boa ideia se familiarizar com os sistemas de coordenadas de transformação e a renderização antes de tentar especificar as transformações 3D manualmente.
Observação  As propriedades descritas neste tópico antes pediam um prefixo de fornecedor específico da Microsoft, "-ms-", para trabalhar com o Internet Explorer 10 e os aplicativos da Windows Store em JavaScript. Esse prefixo não é mais necessário, mas ainda é reconhecido. Para garantir compatibilidade no futuro, os aplicativos que usam o prefixo de fornecedor da Microsoft com propriedades de transformação devem ser atualizados adequadamente.

A propriedade transform

Você aplica transformações 2D e 3D a um elemento usando a propriedade transform, que contém uma lista de funções de transformação. A sintaxe da propriedade é a seguinte:

PropriedadeDescrição

transform

Indica as funções de transformação (listadas na seção seguinte) a serem aplicadas ao elemento especificado. A propriedade transform pode ser definida como uma lista de funções de transformação (delimitada por espaços) ou como a palavra-chave none, indicando que nenhuma função de transformação foi aplicada.

 

Funções de transformação com suporte

Veja a seguir uma lista de funções de transformação com suporte no Internet Explorer 10 e nos aplicativos da Windows Store que usam JavaScript para Windows 8. Cada uma é seguida de uma breve amostra de marcação e de uma imagem que demonstra o efeito da amostra. (Para visualizar as funções de transformação 2D compatíveis, consulte Funções de transformação.)

Lembre-se de que a ordem faz diferença! As funções de transformação são aplicadas na ordem em que estão listadas na propriedade transform.

Além disso, os efeitos das funções com um componente de eixo z ficam mais evidentes quando usados em combinação com a função perspective, que dá mais profundidade a eles. Nas seguintes amostras de marcação e imagens, a função perspective e outras foram adicionadas à propriedade transform para evidenciar mais o efeito da função ilustrada. Incentivamos você a ver o efeito de diferentes combinações de funções e valores experimentando a demonstração Prática: transformações 3D no Test Drive do IE.

Perspectiva

perspective(<length>)

A função perspective altera a perspectiva através da qual um elemento é visto, dando uma ilusão de profundidade. Quanto mais o valor fornecido para a função perspectiva aumenta, mais distante do espectador o elemento parece. O valor deve ser maior que 0 e fornecido em pixels.

As unidades de <length> são iguais às fornecidas para qualquer uma das funções de conversão—ou seja, 1px na direção z é a mesma distância que 1px na direção x ou y.

Matriz 3D

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

A função matrix3d especifica uma transformação 3D como uma matriz homogênea 4×4 de 16 valores na ordem principal das colunas. Todas as demais funções de transformação são baseadas na função matrix3d.

Exemplo:


div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

Resultado:

Um div azul quadrado com texto em branco, após ter a seguinte função de transformação aplicada a si: transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);

Conversão 3D

translate3d(<translation-value>, <translation-value>, <translation-value>)

A função translate3D especifica uma conversão 3D pelo vetor [tx,ty,tz], onde tx, ty e tz são o primeiro, segundo e terceiro parâmetros de valor de conversão, respectivamente.

Exemplo:


div {
  transform: translate3d(20px, -60px, 50px); 
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: translate3d(20px, -60px, 50px);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Conversão na direção z

translateZ(<translation-value>)

A função translateZ especifica uma conversão por um determinado valor na direção z. Valores percentuais não são permitidos.

Exemplo:


div {    
  transform: perspective(500px) translateZ(-60px);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: perspective(500px) translateZ(-60px);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Escala 3D

scale3d(<number>, <number>, <number>)

A função scale3d especifica uma operação de escala 3D pelo vetor escalar [sx,sy,sz] descrito pelos três parâmetros.

Exemplo:


div {
  transform: scale3d(0.5, -0.5, 1.5);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: scale3d(0.5, -0.5, 1.5);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Escala vetorial z

scaleZ(<number>)

A função scaleZ especifica uma operação de escala usando o vetor escalar [1,1,sz], onde sz é fornecido como parâmetro. O efeito da função scaleZ é mais evidente quando usado em combinação com funções como rotate e perspective, conforme mostrado no exemplo a seguir.

Exemplo:


div {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: perspective(500px) scaleZ(2) rotateX(45deg);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Giro 3D

rotate3d(<number>, <number>, <number>, <angle>)

A função rotate3d especifica um giro 3D no sentido horário. O elemento gira pelo ângulo especificado no último parâmetro, e sobre o vetor direcional [x,y,z] descrito pelos três primeiros parâmetros. Se o vetor direcional não for de comprimento de unidade, ele será normalizado. Um vetor direcional que não pode ser normalizado, como [0, 0, 0], resulta em nenhum giro.

Exemplo:


div {
   transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: rotate3d(0.7, 0.5, 0.7, 45deg);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Giro na direção X

rotateX(<angle>)

A função rotateX especifica um giro no sentido horário pelo ângulo fornecido sobre o eixo x.

Exemplo:


div {
  transform: perspective(500px) rotateX(45deg);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: perspective(500px) rotateX(45deg);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Giro na direção Y

rotateY(<angle>)

A função rotateY especifica um giro no sentido horário pelo ângulo fornecido sobre o eixo y.

Exemplo:


div {
  transform: perspective(500px) rotateY(45deg);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: perspective (500px) rotateY(70deg);

(O quadrado azul-claro indica a posição original do elemento transformado.)

Giro na direção Z

rotateZ(<angle>)

A função rotateZ especifica um giro no sentido horário pelo ângulo fornecido sobre o eixo z.

Exemplo:


div {
  transform: rotateZ(65deg);
}

Resultado:

Um div azul quadrado com texto branco, após ter as seguintes funções de transformação aplicadas a si: transform: rotateZ(65deg);

(O quadrado azul-claro indica a posição original do elemento transformado.)

A propriedade transform-origin

A propriedade transform-origin estabelece a origem da transformação de um elemento.

Por exemplo, se você especificou a função rotate3d na propriedade transform, essa propriedade deve definir o ponto em torno do qual o elemento giraria. O valor padrão dessa propriedade é "50% 50% 0px" (o meio do elemento).

PropriedadeDescrição

transform-origin

Indica a origem da transformação para o elemento especificado. Esta propriedade é definida com um a três valores de comprimento:

  • O primeiro valor de comprimento especifica a posição no eixo x relativa à caixa recipiente do elemento. Pode ser um valor de comprimento (em uma unidade de comprimento com suporte), uma porcentagem ou uma destas três palavras-chave: left (indicando 0% do comprimento ao longo do eixo x da caixa recipiente), center (indicando o ponto intermediário) ou right (indicando 100% do comprimento).
  • O segundo valor de comprimento especifica a posição no eixo y relativa à caixa recipiente do elemento. Pode ser um valor de comprimento, uma porcentagem ou uma destas três palavras-chave: top (indicando 0% do comprimento ao longo do eixo y da caixa), center (indicando o ponto intermediário) ou bottom (indicando 100% do comprimento).
  • O terceiro valor de comprimento especifica a posição no eixo z relativa à caixa do elemento. Ele deve ser um valor de comprimento.

 

A propriedade transform-style

A propriedade transform-style define como elementos aninhados são renderizados no espaço 3D.

PropriedadeDescrição

transform-style

Define como elementos aninhados são renderizados no espaço 3D. Se você definir essa propriedade como plana para um elemento, todos os seus elementos filho serão renderizados como planos no plano 2D do elemento. Ao girar o elemento sobre os eixos x ou y, você fará com que os filhos em posições z positivas ou negativas apareçam no plano do elemento, e não na frente ou atrás dele.

 

Observação  A especificação W3C define um valor de palavra-chave de preserve-3d para essa propriedade, o que indica que a planificação não é realizada. No momento, o Internet Explorer 10 não fornece suporte para a palavra-chave preserve-3d. Você pode contornar isso aplicando manualmente a transformação do elemento pai a cada um dos elementos filho além da transformação normal do elemento filho.

A propriedade perspective

A propriedade perspective aplica a mesma transformação da função de transformação perspective, com exceção de que é aplicada somente aos filhos posicionados ou transformados do elemento, e não à transformação no elemento em si.

PropriedadeDescrição

perspective

Aplica a mesma transformação que a função de transformação perspective aos filhos posicionados ou transformados do elemento ao qual a propriedade se aplica. Esta propriedade pode ser definida com um número, que estabelece um contexto de empilhamento e um bloco recipiente, ou com a palavra-chave none, que indica que nenhuma transformação de perspectiva é aplicada.

 

A propriedade perspective-origin

A propriedade perspective-origin estabelece a origem da propriedade perspective.

PropriedadeDescrição

perspective-origin

Estabelece a origem da propriedade perspective. Define de forma eficaz a posição de x e y na qual o espectador parece estar olhando para os filhos do elemento. Esta propriedade é definida com um ou dois valores de comprimento:

  • O primeiro valor de comprimento especifica a posição no eixo x relativa à caixa recipiente do elemento. Pode ser um valor de comprimento (em uma unidade de comprimento aceita), uma porcentagem ou uma destas três palavras-chave: left (indicando 0% do comprimento ao longo do eixo x da caixa recipiente), center (indicando o ponto intermediário) ou right (indicando 100% do comprimento).
  • O segundo valor de comprimento especifica a posição no eixo y relativa à caixa recipiente do elemento. Pode ser um valor de comprimento, uma porcentagem ou uma destas três palavras-chave: top (indicando 0% do comprimento ao longo do eixo y da caixa recipiente), center (indicando o ponto intermediário) ou bottom (indicando 100% do comprimento).

 

A propriedade backface-visibility

A propriedade backface-visibility indica se o "lado posterior" (lado inverso) de um elemento transformado é visível quando está voltado ao observador. Com um elemento que não é transformado, o lado da frente do elemento fica voltado para o espectador.

PropriedadeDescrição

backface-visibility

Determina se o verso de um elemento transformado fica visível. Esta propriedade pode ser definida com um de dois valores de palavra-chave:

visible

Indica que o verso fica visível.

hidden

Indica que o lado de trás não fica visível.

 

Referência de API

Transforms

Amostras e tutoriais

Como dar vida à sua página da Web com transformações, transições e animações CSS

Demonstrações do Test Drive do Internet Explorer

Dando vida às páginas com transformações e animações CSS
Prática: transformações 3D
Prática: transformações 2D
Cartões postais do Flickr

Postagens no blog do IE

Animações de página inteira com CSS
Transformações 3D CSS3 no IE10

Especificação

Transformações CSS

Tópicos relacionados

Noções básicas de transformações 2D CSS3

 

 

Mostrar:
© 2015 Microsoft