Módulo 8: Efectos 3D con Bootstrap

Lo Que Bootstrap Ofrece para Efectos 3D

Bootstrap proporciona la estructura perfecta para diseños web 3D:

Sistema de grid – row, col-md-6 col-lg-4 para layouts responsivos de elementos 3D
Componentes card – Base perfecta para cards giratorias con card, card-body
Sistema de colores – bg-primary, bg-danger para caras 3D vibrantes
Utilidades – h-100, text-white, d-flex para estilizado
Propiedades CSS personalizadas – var(--bs-primary) asegura colores consistentes
Border radius – var(--bs-card-border-radius) para consistencia

Cards Giratorias 3D con Bootstrap

Pasa el cursor sobre las cards para girarlas. El grid y los componentes card de Bootstrap proporcionan la estructura.

Lado Frontal

Pasa el cursor para girar

Lado Trasero

¡Usando cards Bootstrap!

Producto

Vista previa interactiva

Detalles

Más información aquí

Característica

Pásame el cursor

Descripción

Bootstrap + CSS 3D

Cubo 3D Rotatorio

Usando colores Bootstrap para cada cara

Frente

Atrás

Derecha

Izquierda

Arriba

Abajo

Implementación con Bootstrap

Estructura HTML usando Bootstrap

<div class="row g-4">
  <div class="col-md-6 col-lg-4">
    <div class="flip-container">
      <div class="card flip-card h-100">
        <div class="card-body flip-front bg-primary text-white">
          <h5 class="card-title">Frente</h5>
        </div>
        <div class="card-body flip-back bg-danger text-white">
          <h5 class="card-title">Atrás</h5>
        </div>
      </div>
    </div>
  </div>
</div>

CSS para Transformación 3D

.flip-container {
  perspective: 1000px; /* Crea profundidad */
  height: 300px;
}

.flip-card {
  transform-style: preserve-3d; /* ¡Esencial para 3D! */
  transition: transform 0.6s;
}

.flip-container:hover .flip-card {
  transform: rotateY(180deg); /* Girar al pasar cursor */
}

.flip-front, .flip-back {
  backface-visibility: hidden; /* Ocultar lado trasero */
  border-radius: var(--bs-card-border-radius); /* Radio Bootstrap */
}

Utilidades Bootstrap Usadas

row g-4 – Grid responsivo con márgenes
col-md-6 col-lg-4 – Columnas responsivas
card, card-body – Estructura de card
h-100 – Cards de altura completa
bg-primary, text-white – Colores Bootstrap
var(--bs-card-border-radius) – Propiedad personalizada CSS

🧠 Reflexión Atelier

¿Cuándo el 3D mejora la UX (ej. vistas previas de productos) vs. cuándo es solo adorno visual? ¿Cuál es el costo de rendimiento? Nota cómo el componente card y el sistema de grid de Bootstrap proporcionan la base perfecta - el framework maneja estructura y diseño responsivo mientras CSS agrega los efectos 3D.