Formación

Efectos 3D en Webflow: como entenderlos y lograrlos de manera práctica

Webflow permite incorporar a nuestros diseños una serie de efectos 3D realmente llamativos y elegantes al mismo tiempo

4/7/2021

Webflow es una herramienta online basada en la tendencia NoCode, una filosofía que posibilita crear herramientas y servicios sin conocimientos de programación y con usos prácticos altamente interconectadas.

Para lograr esos efectos Webflow solo utiliza el CSS y todas sus posibilidades sin hacer uso de otro tipo de tecnologías externas. Todo dentro de Webflow y pudiendo además aplicarles animaciones para lograr efectos llamativos y realistas.

Esta página nos muestra con todo lujo de detalles y ejemplos como realizar dichos efectos de manera didáctica.

Webflow a través de los videotutoriales que acompañan los ejercicios nos enseña, paso a paso, a realizar esas animaciones y efectos 3D.

En primer lugar se nos ofrece una breve introducción al concepto de las distintas aplicaciones 3D y la interfaz que usa Webflow a través de capturas de pantalla para lograrlo. Mover, rotar y perspectiva en 3D son los ejes básicos para poder aplicar esos efectos a elementos de nuestro sitio web.

Y por supuesto puedes abrir esa página para investigar en el propio Webflow como están realizados los efectos y hacer las pruebas que quieras.

EN UN SEGUNDO APARTADO SE NOS OFRECEN 6 EJEMPLOS PRÁCTICOS CON SU VIDEO TUTORIAL E INSTRUCCIONES PASO A PASO:

  • Un showcase o escaparate en 3D
  • Efecto de capas en 3D.
  • Efecto de flip-card.
  • Efecto isométrico aplicado a tarjetas.
  • Aplicar perspectiva a diseños tipo mockup.
  • Creación de un cubo 3D.

CONSEJO: Debo de indicar que Webflow es una herramienta muy versátil y potente pero que también es necesario aplicar una cierta metodología previa de diseño para que el resultado sea óptimo y sin desperdiciar un tiempo preciado intentando diseñar directamente en Webflow. Un paso previo imprescindible, a mi entender, es elaborar la maqueta y estilo de nuestro proyecto con herramientas de prototipado como Adobe XD o Figma, por citar solo dos de ellas. Sea para nosotros o un cliente ese paso nos ahorrará tiempo y recursos que nos permitirán una vez llegado a Webflow confeccionar el sitio web con más soltura y eficacia.

PRECIO: Gratuito, solo el tiempo y las ganas que le quieras dedicar.

Una excelente manera de incorporar (con mesura) efectos 3D para realzar tu web o algún elemento de ella.

Explora la página y su contenido, seguro que sea cual sea tu nivel hay cosas que puedes aprender o perfeccionar.

Más información: http://3d-transforms.webflow.com

Siguiendo esta misma propuesta pero aplicado a Flexbox ya publicamos una entrada sobre ello.

Más información: Flexbox, cómo dominarlo

Imagen
Formación

Opciones formativas en castellano sobre Webflow para el verano

El tiempo de verano puede ser un buen momento para aprender o perfeccionar nuestros conocimientos sobre Webflow

Leer...
Imagen
Formación

Primera edición del curso de Webflow con Kschool

Nueva propuesta formativa para aprender Webflow

Leer...
Imagen
Formación

Los 15 errores a no cometer con Webflow

Weblow, como toda herramienta y principalmente para principiantes, puede en un principio generar una serie de errores comunes de uso si no tenemos ciertos principios o hábitos claros.

Leer...