¿Quieres añadir un elemento dinámico y llamativo a tu portafolio o sitio web usando solo HTML y CSS sin bibliotecas externas? En este tutorial te muestro cómo crear un cubo 3D rotatorio con caras que muestran logos de tecnologías web, aprovechando transformaciones 3D, perspective y animaciones con keyframes.
Estructura HTML esencial para el cubo
<div class=scene><div class=cube><div class=face front></div><div class=face back></div><div class=face right></div><div class=face left></div><div class=face top></div><div class=face bottom></div></div></div>
Explicación breve: la escena actúa como el contenedor 3D con perspective y el elemento cube mantiene transform-style preserve-3d para que las caras se posicionen en el espacio 3D en lugar de quedar aplanadas.
CSS clave para crear la profundidad y la animación
body { display:flex; justify-content:center; align-items:center; height:100vh; background-color:#f0f0f0; margin:0; } .scene { width:200px; height:200px; perspective:600px; } .cube { width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:rotate-cube 12s infinite linear; } .face { position:absolute; width:200px; height:200px; border:1px solid #555; background-size:cover; background-position:center; } .front { background-image:url(https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg); transform:rotateY(0deg) translateZ(100px); } .back { background-image:url(https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg); transform:rotateY(180deg) translateZ(100px); } .right { background-image:url(https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png); transform:rotateY(90deg) translateZ(100px); } .left { background-image:url(https://upload.wikimedia.org/wikipedia/commons/b/b2/Bootstrap_logo.svg); transform:rotateY(-90deg) translateZ(100px); } .top { background-image:url(https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg); transform:rotateX(90deg) translateZ(100px); } .bottom { background-image:url(https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg); transform:rotateX(-90deg) translateZ(100px); } @keyframes rotate-cube { from { transform:rotateY(0deg) rotateX(0deg); } to { transform:rotateY(360deg) rotateX(360deg); } }
Notas prácticas: usa background-size cover para que los logos cubran cada cara sin distorsionar, ajusta perspective para conseguir más o menos profundidad, y cambia la duración de la animación para variar la velocidad. Puedes sustituir las URLs de los logos por las tuyas o por imágenes optimizadas para web.
Ideas de personalización rápida
1. Tamaño y proporciones: modifica width y height de .scene para adaptar el cubo a tu diseño. 2. Interacción: añade transform en hover sobre .scene para pausar o girar en una dirección distinta. 3. Iluminación: crea sombras sutiles con box-shadow en cada cara para mayor realismo. 4. Contenido dinámico: añade texto o iconos SVG centrados en cada cara para reforzar mensajes de marca.
Sobre Q2BSTUDIO y cómo podemos ayudarte
En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones modernas para empresas. Ofrecemos software a medida, aplicaciones a medida y servicios de inteligencia artificial diseñados para resolver retos reales del negocio. También proporcionamos consultoría y soluciones de ciberseguridad para proteger tus activos digitales, servicios cloud aws y azure para desplegar y escalar infraestructuras, y servicios inteligencia de negocio que integran Power BI para visualización y reporting.
Si buscas aprovechar la inteligencia artificial para impulsar procesos, mejorar la experiencia de cliente o crear agentes IA personalizados, nuestro equipo diseña e implementa soluciones de ia para empresas. Trabajamos en proyectos que combinan modelos de IA, agentes IA y pipelines de datos para ofrecer resultados accionables. Además integramos servicios cloud aws y azure para asegurar despliegues robustos y escalables y aplicamos buenas prácticas de ciberseguridad en cada etapa del desarrollo.
Por qué este proyecto encaja como demostración en portafolio
Un cubo 3D hecho con CSS es un ejemplo perfecto de creatividad técnica y atención al detalle: demuestra dominio de transformaciones 3D, animaciones CSS y optimización de recursos, ideal para mostrar en un portafolio cuando se ofrecen servicios como aplicaciones a medida y software a medida. También sirve como pieza para mostrar conceptos de UX visual cuando se trabaja con clientes que demandan soluciones ricas en interfaz y experiencia.
Contacto y llamada a la acción
Si quieres que te acompañemos en la creación de una demo personalizada, una aplicación a medida, integración de inteligencia artificial o una auditoría de ciberseguridad, en Q2BSTUDIO estamos listos para ayudarte con soluciones a medida, agentes IA, servicios inteligencia de negocio y despliegues en servicios cloud aws y azure. Ponte en contacto y conversemos sobre cómo transformar tus ideas en software real y escalable.
.jpg)