CSS3 Animaciones – Efecto 3d sencillo

Publicada el por

Os dejamos dos ejemplos de animaciones con CSS3 en el que mostramos cómo simular efecto 3d de manera diferente.

Por un lado la propiedad z-index. Como sabéis, esta propiedad permite asignar una profundidad vertical (coordenadas Z) a un objeto. Así pues, podemos tener varios objetos con diferentes z-index, haciendo que unos se muestren por encima de otros. En este ejemplo, tenemos varios objetos en diferentes profundidades en tonalidades de grises, y el primero de ellos (tonalidad naranja), que va cogiendo valores del 0 al 5 en z-index para ir subiendo:

See the Pen CSS Animation – Z-index 3d movement by Trescomatres (@trescomatres) on CodePen.

Por otro lado utilizar color. Es un efecto 3D parecido, pero mucho mas simple. En este caso tenemos los mismos objetos con las mismas profundidades (z-index), y lo que animamos es el cambio de color. No hay ningún objeto en movimiento, lo único que va cambiando es el color de cada objeto. De este modo, parece que también se produce un movimiento de abajo a arriba. Aquí lo tenéis en acción:

See the Pen CSS Animation – Color 3d effect by Trescomatres (@trescomatres) on CodePen.

Espero que estos dos ejemplos os den unas ideas para crear vuestras animaciones.

Más artículos con ejemplos de código

https://blog.trescomatres.com/tag/codepen-io/

Nuestros ejemplos de código en CodePen-io

https://codepen.io/trescomatres/