transformações 3D CSS

transformações 3D CSS

O CSS também suporta conversões 3D.

Coloque o cursor sobre os elementos abaixo para ver a diferença entre a conversão 2D e 3D:

rotação 2D
rotação 3D

Nesta seção, você aprenderá os seguintes atributos CSS:

  • transform

Suporte do navegador

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

Atributo Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Métodos de transformação 3D do CSS

através do CSS transform Atributo, você pode usar os seguintes métodos de transformação 3D:

  • rotateX()
  • rotateY()
  • rotateZ()

Método rotateX()

Rotar X

rotateX() Método para fazer o elemento girar em um ângulo dado em torno de seu eixo X:

Exemplo

#myDiv {
  transform: rotateX(150deg);
}

Experimente você mesmo

Método rotateY()

Rotar Y

rotateY() Método para fazer o elemento girar em um ângulo dado em torno de seu eixo Y:

Exemplo

#myDiv {
  transform: rotateY(130deg);
}

Experimente você mesmo

Método rotateZ()

rotateZ() Método para fazer o elemento girar em um ângulo dado em torno de seu eixo Z:

Exemplo

#myDiv {
  transform: rotateZ(90deg);
}

Experimente você mesmo

Atributos de transformação CSS

A tabela a seguir lista todos os atributos de transformação 3D:

Atributo Descrição
transform Aplica uma transformação 2D ou 3D ao elemento.
transform-origin Permite que você mude a posição do elemento transformado.
transform-style Define como os elementos aninhados são exibidos no espaço 3D.
perspective Define o efeito de perspectiva do elemento 3D.
perspective-origin Define a posição inferior do elemento 3D.
backface-visibility Define se o elemento é visível quando não está voltado para a tela.

Métodos de transformação 3D do CSS

Função Descrição
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Define a transformação 3D, usando uma matriz 4x4 de 16 valores.
translate3d(x,y,z) Define a transformação de rotação 3D.
translateX(x) Define a transformação de rotação 3D, usando apenas os valores para o eixo X.
translateY(y) Define a transformação de rotação 3D, usando apenas os valores para o eixo Y.
translateZ(z) Define a transformação de rotação 3D, usando apenas os valores para o eixo Z.
scale3d(x,y,z) Define a transformação de escalonamento 3D.
scaleX(x) Define a transformação de escalonamento 3D, fornecendo um valor para o eixo X.
scaleY(y) Define a transformação de escalonamento 3D, fornecendo um valor para o eixo Y.
scaleZ(z) Define a transformação de escalonamento 3D, fornecendo um valor para o eixo Z.
rotate3d(x,y,z,ângulo) definir a rotação 3D.
rotateX(ângulo) definir a rotação 3D ao longo do eixo X.
rotateY(ângulo) definir a rotação 3D ao longo do eixo Y.
rotateZ(ângulo) definir a rotação 3D ao longo do eixo Z.
perspective(n) definir a visão de perspectiva 3D do elemento de transformação 3D.