Transformações CSS 3D

Índice

    Mostrar índice

Transformações CSS 3D

CSS também oferece suporte a transformações 3D.

Passe o mouse sobre os elementos abaixo para ver a diferença entre um 2D e uma transformação 3D:

<script> var x,y,n=0,ny=0,rotINT,rotYINT function rotateDIV() { x=document.getElementById("rotate2D") clearInterval(rotINT) rotINT=setInterval("startRotate()",10) } function rotateYDIV() { y=document.getElementById("rotate3D") clearInterval(rotYINT) rotYINT=setInterval("startYRotate()",10) } function startRotate() { n=n+1 x.style.transform="rotate(" + n + "deg)" x.style.webkitTransform="rotate(" + n + "deg)" x.style.OTransform="rotate(" + n + "deg)" x.style.MozTransform="rotate(" + n + "deg)" if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} } } function startYRotate() { ny=ny+1 y.style.transform="rotateY(" + ny + "deg)" y.style.webkitTransform="rotateY(" + ny + "deg)" y.style.OTransform="rotateY(" + ny + "deg)" y.style.MozTransform="rotateY(" + ny + "deg)" if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} } }
2D rotate
3D rotate

Neste capítulo você aprenderá sobre a seguinte propriedade CSS:

  • transform

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Métodos de transformação CSS 3D

Com a propriedade CSS transform você pode usar os seguintes métodos de transformação 3D:

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

O método rotateX()

O método rotateX() gira um elemento em torno de seu eixo X em um determinado grau:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

O método rotateY()

O método rotateY() gira um elemento em torno de seu eixo Y em um determinado grau:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>

<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

O método rotateZ()

O método rotateZ() gira um elemento em torno de seu eixo Z em um determinado grau:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>

<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

Propriedades de transformação CSS

A tabela a seguir lista todas as propriedades de transformação 3D:

transform

Aplica uma transformação 2D ou 3D a um elemento

transform-origin

Permite alterar a posição dos elementos transformados

transform-style

Especifica como os elementos aninhados são renderizados no espaço 3D

perspective

Especifica a perspectiva de como os elementos 3D são visualizados

perspective-origin

Especifica a posição inferior dos elementos 3D

backface-visibility

Define se um elemento deve ou não ficar visível quando não estiver de frente para a tela

Métodos de transformação CSS 3D

matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Define uma transformação 3D, usando uma matriz 4x4 de 16 valores

translate3d(x,y,z)

Define uma tradução 3D

translateX(x)

Define uma translação 3D, usando apenas o valor do eixo X

translateY(y)

Define uma translação 3D, usando apenas o valor do eixo Y

translateZ(z)

Define uma translação 3D, usando apenas o valor do eixo Z

scale3d(x,y,z)

Define uma transformação em escala 3D

scaleX(x)

Define uma transformação em escala 3D fornecendo um valor para o eixo X

scaleY(y)

Define uma transformação de escala 3D fornecendo um valor para o eixo Y

scaleZ(z)

Define uma transformação de escala 3D fornecendo um valor para o eixo Z

rotate3d(x,y,z,angle)

Define uma rotação 3D

rotateX(angle)

Define uma rotação 3D ao longo do eixo X

rotateY(angle)

Define uma rotação 3D ao longo do eixo Y

rotateZ(angle)

Define uma rotação 3D ao longo do eixo Z

perspective(n)

Define uma vista em perspectiva para um elemento transformado em 3D