Crear efectos 3D usando solo css con transform y perspective

Publicado el Jueves, 03 Octubre 2013 13:59
eye 5347
Compartir1
  • Imprimir

Las transformaciones CSS nos permiten transformar los objetos que se encuentren tanto en un espacio bidimensional como tridimensional. Estas transformaciones permiten mover los objetos por los ejes X, Z e Y, rotarlos o cambiar la escala de los mismos. Si ademas añadimos la propiedad perspective pasaríamos a tener una transformación tridimensional.

Antes de lanzarnos a crear nuestros efectos 3D vamos a ver como están dispuestos los ejes X, Z, e Y, algo fundamental a la hora de situar cualquier elemento y moverlo por la pantalla.

 

ejes-de-coordenadas

 

Como podemos observar a la hora de realizar un efecto tridimensional el eje Z es el mas importante puesto que al combinarlo con la propiedad perspective, nos da la profundidad en el plano, es decir nos permite hacer que los objetos se acerquen o se alejen. Con los otros dos ejes definiremos los desplazamientos  laterales y verticales dentro de este escenario 3D.

A continuación muestro la diferencia entre un escenario 2D y uno 3D:

 

 
 
 
 
 
 
 
 
 
 
 
 

 

 

 

 

 

 

 

Los 2 cubos usan la misma clase CSS para animarse, la única diferencia radica en que el cubo de la derecha estra dentro de un contenedor al que se le aplica la propiedad perspective, lo que lo convierte en tridimensional, veamos el código:

Primero hay que dar forma al  efecto aplicando el CSS a todas las caras del cubo, empezando por los estilos comunes como las dimensiones..

1
2
3
4
5
6
7
.cubo div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid #222;
     
}

..y después cara por cara orientándolas a la su posición correspondiente.

1
2
3
4
5
6
.cubo .cara1 { -webkit-transform: translateZ(60px);                                }
.cubo .cara2 { -webkit-transform: rotateY(90deg)  translateZ(60px);                }
.cubo .cara3 { -webkit-transform: rotateY(90deg)  rotateX(90deg) translateZ(60px); }
.cubo .cara4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); }
.cubo .cara5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); }
.cubo .cara6 { -webkit-transform: rotateX(-90deg) translateZ(60px);                }

Para que roten hay que hacer una animación con keyframes que quedaria asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@-webkit-keyframes rotacubo {
    0% {   
    -webkit-transform: rotateX(0deg);          
    }    
    100% {       
    -webkit-transform: rotateX(360deg);      
    }
  }
 
  .animacubo {
    -webkit-animation-name: rotacubo;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 60px 60px 0;

Importante en este punto el origen (transform-origin) de la animación, ya que determina el punto sobre el que los cubos van a rotar, en este caso la mitad de su longitud. Por lo demás no hay nada especial, un efecto de rotación sobre el eje X con rotateX que se ejecuta de forma lineal, algo sobre lo que ya escribí en este artículo.

Por ultimo el html del primer cubo seria así..

1
2
3
4
5
6
7
8
<div class="cubo animacubo">
    <div class="cara1"></div>
    <div class="cara2"></div>
    <div class="cara3"></div>
    <div class="cara4"></div>
    <div class="cara5"></div>
    <div class="cara6"></div>
</div>

..mientras que el segundo cubo esta en un contenedor con el siguiente CSS

1
2
3
4
5
#contenedor{
    width: 120px;
    height: 120px;
    -webkit-perspective:1000px;
}
1
2
3
4
5
6
7
8
9
10
<div id="contenedor">
    <div class="cubo animacubo">
        <div class="cara1"></div>
        <div class="cara2"></div>
        <div class="cara3"></div>
        <div class="cara4"></div>
        <div class="cara5"></div>
        <div class="cara6"></div>
    </div>
</div>

Ahora que ya sabemos como aplicar perspective a los efectos 3D vamos a complicar un poco la cosa añadiendo el efecto de profundidad sobre el eje Z y alguna rotación mas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@-webkit-keyframes rotacubo {
   0% {   
   -webkit-transform: translateZ(0) rotateX(0) rotateY(0);          
   }
   50% {   
   -webkit-transform: translateZ(-800px) rotateX(180deg) rotateY(180deg);          
   }      
   100% {       
   -webkit-transform: translateZ(0) rotateX(360deg) rotateY(360deg);      
   }
 }
 
 .animacubo {
   -webkit-animation-name: rotacubo;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 12s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 60px 60px 0;
 }

En este CSS añado a la propiedad transform otras dos funciones, translateZ y rotateY, la primera es para que el cubo se mueva en el eje Z logrando ese efecto de profundidad y la segunda es para que rote sobre el eje Y al mismo tiempo que sobre el eje X. Este seria el efecto conseguido con ese código:

 

 
 
 
 
 
 

 

 

Para que los efectos 3D y las transformaciones sean compatibles con firefox y otros navegadores no webkit  tendremos que quitar los prefijos -webkit- de las instrucciones CSS para que estos puedan interpretarlas.

 

En esta ocasión no incluyo el código de los ejemplos puesto que lo he realizado sobre la marcha en el editor de la web, pero voy a compartir con vosotros una pequeña animación que he realizado para comprender mejor estas propiedades. Se trata de un octágono al que le he añadido una textura y un fondo, la base es la misma, solo cambian el numero de caras.

Puedes verlo en acción o descargar el código fuente con las imágenes desde aquí:

 

DEMO  |  SOURCE

 

 


No olvides compartir si te gustó lo que leiste.

Compartir1

También podría interesarte:

Si quieres ser avisado cuando vuelva a publicar.


 

Valora este artículo.

Crear efectos 3D usando solo css con transform y perspective.
4.5 de 5 basado en 4 Votos
Valoración del Usuario:  / 4
MaloBueno 

Comentarios   

 
Agustín
0 #2 Agustín 08-10-2013 17:13
Buena pregunta! En realidad no he usado ninguna herramienta ya que son figuras muy sencillas, en el caso del cuadrado todas las caras son iguales y están en el mismo angulo unas de otras y para el octágono mas de lo mismo, una vez que sacas una arista las demás son iguales, no obstante ya he visto varias herramientas online que te permiten generar el css de figuras 3D mas complejas.
Aquí te dejo una:
tridiv.com/

Salu2
Citar
 
 
Trasto
0 #1 Trasto 08-10-2013 15:41
Hola soy nuevo en esto y queria preguntarte , que herramienta usas para calcular los grados en las rotaciones y los translate??
Citar
 
Escribir un comentario

2500 simbolos

Código de seguridad
Refescar

Licencia Creative Commons
Arriba!