Transformaciones CSS 3D

Tabla de contenido

Mostrar tabla de contenidos

Transformaciones CSS 3D

CSS también admite transformaciones 3D.

Pase el mouse sobre los elementos a continuación para ver la diferencia entre un 2D y una transformación 3D:

2D rotate

3D rotate

En este capítulo aprenderá sobre la siguiente propiedad CSS:

transform

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que admite totalmente la propiedad.

Property
transform	36.0	10.0	16.0	9.0	23.0

Métodos de transformación CSS 3D

Con la propiedad CSS transform puedes usar los siguientes métodos de transformación 3D:

rotateX()
rotateY()
rotateZ()

El método `rotateX()`

El método rotateX() rota un elemento alrededor de su eje X en un grado determinado:

Ejemplo

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

Pruébelo usted mismo →

<!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>

El método `rotateY()`

El método rotateY() rota un elemento alrededor de su eje Y en un grado determinado:

Ejemplo

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

Pruébelo usted mismo →

<!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>

El método `rotateZ()`

El método rotateZ() gira un elemento alrededor de su eje Z en un grado determinado:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Propiedades de transformación CSS

La siguiente tabla enumera todas las propiedades de transformación 3D:

transform: Aplica una transformación 2D o 3D a un elemento.
transform-origin: Le permite cambiar la posición de los elementos transformados.
transform-style: Especifica cómo se representan los elementos anidados en el espacio 3D.
perspective: Especifica la perspectiva sobre cómo se ven los elementos 3D.
perspective-origin: Especifica la posición inferior de los elementos 3D.
backface-visibility: Define si un elemento debe ser visible o no cuando no está frente a la pantalla.

Métodos de transformación CSS 3D

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Define una transformación 3D, utilizando una matriz de 4x4 de 16 valores.
translate3d(x,y,z): Define una traducción 3D.
translateX(x): Define una traslación 3D, usando solo el valor para el eje X
translateY(y): Define una traslación 3D, usando solo el valor para el eje Y
translateZ(z): Define una traslación 3D, usando solo el valor para el eje Z
scale3d(x,y,z): Define una transformación a escala 3D.
scaleX(x): Define una transformación de escala 3D dando un valor para el eje X
scaleY(y): Define una transformación de escala 3D dando un valor para el eje Y
scaleZ(z): Define una transformación de escala 3D dando un valor para el eje Z
rotate3d(x,y,z,angle): Define una rotación 3D.
rotateX(angle): Define una rotación 3D a lo largo del eje X.
rotateY(angle): Define una rotación 3D a lo largo del eje Y.
rotateZ(angle): Define una rotación 3D a lo largo del eje Z.
perspective(n): Define una vista en perspectiva para un elemento transformado en 3D.

Transformaciones CSS 3D

Tabla de contenido