🧊 Module 8: 3D Web Effects

Using Bootstrap Grid + CSS 3D Transforms

Bootstrap 5.3 CSS 3D Transforms Card Components

3D Flip Cards with Bootstrap

Hover over cards to flip them. Bootstrap's grid and card components provide the structure.

Front Side

Hover to flip

Back Side

Using Bootstrap cards!

Product

Interactive preview

Details

More information here

Feature

Hover me

Description

Bootstrap + 3D CSS

3D Rotating Cube

Using Bootstrap colors for each face

Front
Back
Right
Left
Top
Bottom

Implementation with Bootstrap

HTML Structure using 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">Front</h5>
        </div>
        <div class="card-body flip-back bg-danger text-white">
          <h5 class="card-title">Back</h5>
        </div>
      </div>
    </div>
  </div>
</div>

CSS for 3D Transform

.flip-container {
  perspective: 1000px; /* Creates depth */
  height: 300px;
}

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

.flip-container:hover .flip-card {
  transform: rotateY(180deg); /* Flip on hover */
}

.flip-front, .flip-back {
  backface-visibility: hidden; /* Hide back side */
  border-radius: var(--bs-card-border-radius); /* Bootstrap radius */
}

Bootstrap Utilities Used

  • row g-4 – Responsive grid with gutters
  • col-md-6 col-lg-4 – Responsive columns
  • card, card-body – Card structure
  • h-100 – Full height cards
  • bg-primary, text-white – Bootstrap colors
  • var(--bs-card-border-radius) – CSS custom property