<div class="flip">
  <div class="face front">Hover me</div>
  <div class="face back">You found the back!</div>
</div>

/* Parent (.demo-stage or your wrapper) needs perspective */
.stage { perspective: 1000px; }

.flip {
  width: 220px; height: 280px;
  position: relative;
  transform-style: preserve-3d;          /* 3D children */
  transition: transform .7s ease;
}
.flip:hover { transform: rotateY(180deg); }

.flip .face {
  position: absolute; inset: 0;
  backface-visibility: hidden;           /* hide when facing away */
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
}
.flip .front { background: linear-gradient(135deg,#d946ef,#7e22ce); }
.flip .back  {
  background: linear-gradient(135deg,#0ea5e9,#1e40af);
  transform: rotateY(180deg);            /* start flipped */
}

<div class="coin">
  <div class="side heads">$</div>
  <div class="side tails">2026</div>
</div>

.coin {
  width: 120px; height: 120px;
  position: relative;
  transform-style: preserve-3d;
  animation: coinSpin 3s linear infinite;
}
@keyframes coinSpin {
  from { transform: rotateY(0);      }
  to   { transform: rotateY(360deg); }
}
.coin .side {
  position: absolute; inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 35%, #fbbf24, #b45309);
  font-weight: 700;
}
.coin .tails { transform: rotateY(180deg); }

<div class="door-scene">
  <div class="door"></div>
</div>

.door-scene {
  width: 200px; height: 260px;
  position: relative;
  background: linear-gradient(180deg,#0ea5e9,#1e40af);  /* what's behind */
  overflow: hidden;
  transform-style: preserve-3d;
}
.door {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,#78350f,#451a03);
  transform-origin: left center;   /* ← hinge on the LEFT edge */
  transform: rotateY(0);
  transition: transform 1s ease;
  cursor: pointer;
}
.door-scene:hover .door {
  transform: rotateY(-110deg);      /* swings outward */
}

<div class="cube-wrap">
  <div class="cube">
    <div class="face f-front">1</div>
    <div class="face f-back">2</div>
    <div class="face f-right">3</div>
    <div class="face f-left">4</div>
    <div class="face f-top">5</div>
    <div class="face f-bottom">6</div>
  </div>
</div>

.cube-wrap { width: 140px; height: 140px; perspective: 600px; }

.cube {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cubeSpin 12s linear infinite;
}
@keyframes cubeSpin {
  from { transform: rotateX(-20deg) rotateY(0);      }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}
.cube .face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}

/* Half-size (cube is 140 × 140 × 140, so half = 70) */
.cube .f-front  { transform: translateZ(70px); }
.cube .f-back   { transform: translateZ(-70px) rotateY(180deg); }
.cube .f-right  { transform: translateX(70px)  rotateY(90deg); }
.cube .f-left   { transform: translateX(-70px) rotateY(-90deg); }
.cube .f-top    { transform: translateY(-70px) rotateX(90deg); }
.cube .f-bottom { transform: translateY(70px)  rotateX(-90deg); }

<div class="pyr-wrap">
  <div class="pyr">
    <div class="face f1"></div>
    <div class="face f2"></div>
    <div class="face f3"></div>
    <div class="face f4"></div>
  </div>
</div>

.pyr-wrap { width: 160px; height: 160px; perspective: 700px; }

.pyr {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: pyrSpin 10s linear infinite;
}
@keyframes pyrSpin {
  from { transform: rotateX(-20deg) rotateY(0);      }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}
.pyr .face {
  position: absolute;
  width: 160px; height: 160px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);  /* triangle */
  transform-origin: 50% 100%;
  background: linear-gradient(180deg,#f59e0b,#b45309);
}
.pyr .f1 { transform: rotateY(0deg)   translateZ(46px); }
.pyr .f2 { transform: rotateY(90deg)  translateZ(46px); }
.pyr .f3 { transform: rotateY(180deg) translateZ(46px); }
.pyr .f4 { transform: rotateY(270deg) translateZ(46px); }

<div class="rubik-wrap">
  <div class="rubik">
    <!-- 6 faces; each has 9 <span>s for stickers -->
    <div class="r-face front">
      <span></span><span></span><span></span>
      <span></span><span></span><span></span>
      <span></span><span></span><span></span>
    </div>
    <div class="r-face back"><!-- 9 spans --></div>
    <div class="r-face right"><!-- 9 spans --></div>
    <div class="r-face left"><!-- 9 spans --></div>
    <div class="r-face top"><!-- 9 spans --></div>
    <div class="r-face bottom"><!-- 9 spans --></div>
  </div>
</div>

.rubik-wrap { perspective: 1000px; }

.rubik {
  position: relative;
  width: 160px; height: 160px;
  transform-style: preserve-3d;
  animation: rubikSpin 14s linear infinite;
}
@keyframes rubikSpin {
  from { transform: rotateX(-24deg) rotateY(-30deg); }
  to   { transform: rotateX(-24deg) rotateY(330deg); }
}

/* Each face is a 3×3 CSS grid of stickers on a black body */
.rubik .r-face {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: #111;                    /* plastic body */
  border-radius: 6px;
}
.rubik .r-face span {
  border-radius: 4px;
  box-shadow:
    inset 0  2px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.25);   /* beveled sticker */
}

/* One color per face — classic Rubik's Cube scheme */
.rubik .r-face.front  span { background: #dc2626; }  /* red */
.rubik .r-face.back   span { background: #ea580c; }  /* orange */
.rubik .r-face.top    span { background: #f8fafc; }  /* white */
.rubik .r-face.bottom span { background: #fcd34d; }  /* yellow */
.rubik .r-face.right  span { background: #16a34a; }  /* green */
.rubik .r-face.left   span { background: #2563eb; }  /* blue */

/* Position the 6 faces */
.rubik .r-face.front  { transform: translateZ(80px); }
.rubik .r-face.back   { transform: translateZ(-80px) rotateY(180deg); }
.rubik .r-face.right  { transform: translateX(80px)  rotateY(90deg);  }
.rubik .r-face.left   { transform: translateX(-80px) rotateY(-90deg); }
.rubik .r-face.top    { transform: translateY(-80px) rotateX(90deg);  }
.rubik .r-face.bottom { transform: translateY(80px)  rotateX(-90deg); }

<div class="tilt-wrap">
  <div class="tilt">
    <h4>Morning light</h4>
    <p>A short caption...</p>
  </div>
</div>

/* Wrapper establishes 3D space */
.tilt-wrap { perspective: 900px; }

.tilt {
  width: 240px; height: 320px;
  border-radius: 20px;
  background: linear-gradient(135deg,#d946ef,#6366f1);
  color: #fff;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
.tilt:hover {
  transform: rotateX(8deg) rotateY(-12deg) scale(1.05);
}

<div class="fan">
  <div class="card c1">First.</div>
  <div class="card c2">Second.</div>
  <div class="card c3">Third.</div>
</div>

.fan {
  width: 240px; height: 300px;
  position: relative;
  transform-style: preserve-3d;
}
.fan .card {
  position: absolute; inset: 0;           /* all stacked */
  border-radius: 16px;
  color: #fff; padding: 20px;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.fan .card.c1 { background: linear-gradient(135deg,#d946ef,#86198f); }
.fan .card.c2 { background: linear-gradient(135deg,#0ea5e9,#1e40af); }
.fan .card.c3 { background: linear-gradient(135deg,#f59e0b,#b45309); }

.fan:hover .card.c1 { transform: translate(-70px, 10px) rotate(-8deg); }
.fan:hover .card.c2 { transform: translate(0,    -12px) rotate(2deg);  }
.fan:hover .card.c3 { transform: translate(70px,  10px) rotate(8deg);  }

<a href="#" class="btn3d">Press me</a>

.btn3d {
  padding: 16px 36px;
  background: #d946ef;
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  box-shadow:
    0 8px 0 #86198f,                 /* the "side" face */
    0 14px 20px rgba(0,0,0,.4);      /* ground shadow */
  transform: translateY(0);
  transition: all .15s;
}
.btn3d:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 0 #86198f,
    0 18px 26px rgba(0,0,0,.5);
}
.btn3d:active {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 #86198f,
    0 4px 10px rgba(0,0,0,.3);
}

<div class="book-wrap">
  <div class="book">

    <!-- Four layers, back to front: -->
    <div class="back-cover"></div>     <!-- rear board       -->
    <div class="page-stack"></div>     <!-- page thickness   -->

    <div class="pages">                <!-- the open spread  -->
      <div class="left-page">
        <h4>Chapter One</h4>
        <p>The morning arrived...</p>
      </div>
      <div class="right-page"><p>...continued</p></div>
    </div>

    <!-- Front cover has TWO faces so the inside of the
         cover is visible when the book is open. -->
    <div class="front-cover">
      <div class="cover-outside">
        <small>A Short Novel</small>
        <h3>The Quiet Hour</h3>
      </div>
      <div class="cover-inside">
        <small>Ex Libris</small>
      </div>
    </div>

  </div>
</div>

.book-wrap {
  perspective: 1800px;
  width: 260px; height: 320px;
  padding-left: 60px;             /* room for the cover to swing into */
}
.book {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-18deg);   /* display tilt */
}

/* Rear board, page stack, and open spread are all static. */
.back-cover { position: absolute; inset: 0; transform: translateZ(-10px); }
.page-stack { position: absolute; inset: 3px; transform: translateZ(-6px);
  background: repeating-linear-gradient(180deg,#f5f2ea 0 2px,#cbc4b0 2px 3px); }
.pages { position: absolute; inset: 6px; transform: translateZ(-2px); display: flex; }

/* Front cover: wrapper rotates; children are the two faces. */
.front-cover {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;              /* ← hinge = spine */
  transition: transform 1s ease;
}
.book-wrap:hover .front-cover {
  transform: rotateY(-158deg);                /* cover swings open */
}

/* Both faces sit in the same spot; backface-visibility hides whichever
   isn't pointing at the user. The INSIDE is pre-rotated 180° so it
   faces the other way. */
.cover-outside,
.cover-inside {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 2px 10px 10px 2px;
}
.cover-outside { background: linear-gradient(135deg,#7e22ce,#86198f); }
.cover-inside  {
  transform: rotateY(180deg);                 /* faces inward */
  background: linear-gradient(135deg,#faf7ec,#ece5d0);
}

<div class="carousel-wrap">
  <div class="carousel">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
  </div>
</div>

.carousel-wrap { width: 260px; height: 220px; perspective: 1000px; }

.carousel {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: carSpin 15s linear infinite;
}
@keyframes carSpin {
  from { transform: rotateY(0);       }
  to   { transform: rotateY(-360deg); }
}
.carousel .item {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px; height: 160px;
  margin: -80px 0 0 -65px;              /* center at origin */
  border-radius: 14px;
  background: linear-gradient(135deg,#d946ef,#7e22ce);
}

/* 6 items around a ring, each rotated 60° and pushed out 200px */
.carousel .item:nth-child(1) { transform: rotateY(0deg)   translateZ(200px); }
.carousel .item:nth-child(2) { transform: rotateY(60deg)  translateZ(200px); }
.carousel .item:nth-child(3) { transform: rotateY(120deg) translateZ(200px); }
.carousel .item:nth-child(4) { transform: rotateY(180deg) translateZ(200px); }
.carousel .item:nth-child(5) { transform: rotateY(240deg) translateZ(200px); }
.carousel .item:nth-child(6) { transform: rotateY(300deg) translateZ(200px); }

<div class="text3d">Go Deep.</div>

.text3d {
  font-size: 4rem;
  font-weight: 700;
  color: #d946ef;
  /* Stack shadows in the SAME color, each 1px further offset —
     this creates the illusion of a thick 3D side. */
  text-shadow:
    1px 1px 0 #c026d3,
    2px 2px 0 #a21caf,
    3px 3px 0 #86198f,
    4px 4px 0 #701a75,
    5px 5px 0 #4a044e,
    6px 6px 0 #4a044e,
    8px 8px 30px rgba(0,0,0,.5);   /* soft ground shadow */
  /* perspective tilt makes the "side" visible */
  transform: perspective(500px) rotateX(15deg);
}

<!-- Load Google's <model-viewer> web component once, per page -->
<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js">
</script>

<!-- Drop one tag. That's the whole component. -->
<model-viewer
  src="DamagedHelmet.glb"
  alt="A damaged sci-fi helmet"
  auto-rotate
  camera-controls
  shadow-intensity="1"
  exposure="1"
  environment-image="neutral">
</model-viewer>

/* USEFUL <model-viewer> ATTRIBUTES

src                  URL to a .glb or .gltf file
alt                  screen-reader description
auto-rotate          spin slowly when user isn't interacting
camera-controls      let the user drag to rotate / scroll to zoom
shadow-intensity     0–2, how strong the ground shadow is
exposure             overall brightness (default 1)
environment-image    "neutral" (built-in) or a URL to an .hdr file
  — this is what makes metallic/reflective surfaces look right
poster               image to show while the model loads
ar                   enable Augmented Reality on mobile

Style it like any HTML element:
  model-viewer {
    width: 100%;
    height: 400px;
    background: transparent;
  }

FREE MODELS to try:
  • Khronos sample models (github.com/KhronosGroup/glTF-Sample-Models)
  • poly.pizza              — CC0 library, huge
  • sketchfab.com           — filter by "downloadable"
  • modelviewer.dev/shared-assets/models/ */

<model-viewer
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="An astronaut"
  auto-rotate
  camera-controls
  shadow-intensity="1.2"
  exposure="0.9"
  environment-image="neutral">
</model-viewer>

<!-- Yes, that's the whole thing.
     No Three.js boilerplate required. -->

/* GLB vs GLTF — QUICK BACKGROUND

.gltf  JSON file + separate .bin buffer + separate texture images.
       Good for when you want to tweak files individually.

.glb   Everything packed into a single binary file.
       Smaller, faster to load. Use this unless you have a reason
       not to.

Both are the same 3D format (glTF 2.0) — they're the "JPG of 3D".

EXPORTING YOUR OWN
  Blender:  File → Export → glTF 2.0 (.glb/.gltf)
  Figma:    no native export — use sketchfab or Blender import
  Substance, Maya, C4D, Houdini all ship glTF exporters.

OPTIMIZATION
  • Run your .glb through gltfpack or gltf-transform to compress
    textures (KTX2/Basis) and geometry (Draco / Meshopt).
  • Aim for under 5 MB for a single hero model on a landing page.
  • Use texture resolutions you actually need (1k often enough). */

<!-- Load the web component once per page -->
<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js">
</script>

<div class="product-showcase">

  <div class="product-viewer">
    <model-viewer id="product-mv"
      src="BoomBox.glb"
      alt="BoomBox product"
      auto-rotate
      camera-controls
      shadow-intensity="1.5"
      exposure="1.2"
      environment-image="neutral"
      camera-orbit="-30deg 75deg 0.3m"
      field-of-view="30deg"></model-viewer>
    <div class="product-hint">drag to inspect</div>
  </div>

  <div class="product-info">
    <span class="product-eyebrow">New Release</span>
    <h3>Studio BoomBox '86</h3>
    <p>A radio-cassette deck reissue...</p>
    <div class="product-price">$249</div>
    <button class="btn-primary">Add to cart</button>
    <button class="btn-ghost"
      onclick="toggleSpin()">Toggle spin</button>
  </div>
</div>

/* Two-column layout: 3D viewer on the left, info card on the right.
   Stacks on mobile. */
.product-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 860px;
  width: 100%;
  align-items: center;
}
@media (max-width: 720px) {
  .product-showcase { grid-template-columns: 1fr; }
}

/* The 3D viewer — nice rounded frame with subtle interior glow */
.product-viewer {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(217,70,239,.12) 0%,
      transparent 70%),
    linear-gradient(180deg, #1a1a24, #0f0f17);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.product-viewer model-viewer {
  width: 100%; height: 100%;
  background: transparent;
}

/* Info card */
.product-info { padding: 8px 4px; color: #e2e8f0; }
.product-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(217,70,239,.15); color: #f5d0fe;
  margin-bottom: 14px;
}
.product-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem; color: #fff; line-height: 1.1;
  margin-bottom: 8px;
}
.product-price {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem; color: #fff;
  margin-top: 16px;
}
.btn-primary, .btn-ghost {
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: #d946ef; color: #fff; }
.btn-primary:hover { background: #c026d3; }
.btn-ghost { background: transparent; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.15); }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: #fff; }

/* <model-viewer> fires events AND exposes properties you can
   read or set at runtime. Here are the ones you'll reach for most. */

const mv = document.querySelector('model-viewer');

/* Toggle the auto-rotate attribute on click */
function toggleSpin() {
  mv.autoRotate = !mv.autoRotate;
}

/* Listen for the model finishing load */
mv.addEventListener('load', () => {
  console.log('Model ready!');
});

/* Snap the camera to a specific orbit
   (theta, phi, radius) — in degrees / meters */
mv.cameraOrbit = '45deg 60deg 0.4m';

/* Get a PNG screenshot of the current view */
async function exportView() {
  const blob = await mv.toBlob({ idealAspect: true });
  /* ... then upload or download blob */
}

/* Change the model at runtime to offer variant selection */
function swapToVariant(url) { mv.src = url; }

/* Full attribute + property reference:
   https://modelviewer.dev/docs/index.html */