MarvelousUI
DE
Hol dir Zugang

Beta

Gallery 3D <mv-gallery-3d>

CSS-3D-Galerie mit drei Inszenierungen: Ring (ein Zylinder, den du drehst, der ausrollt und auf einem Element zum Stehen kommt), Kuppel (Kacheln an der Innenseite einer Kugel, in der du dich umsiehst) und Kreisbogen (ein endloser Streifen entlang eines Bogens, gesteuert per Ziehen oder Mausrad). Optionale eingebaute Lightbox.

Kategorie3D
TypWeb Component (<mv-gallery-3d>)
StatusBeta
Keywordsgallery, 3d, carousel, ring, dome, sphere, circular, orbit, lightbox, drag, inertia

When to use

  • A portfolio or campaign needs an immersive image showcase spun as a 3D ring with inertia
  • A large photo collection should surround the visitor as a dome of tiles to look around
  • An infinite strip of images bent into an arc should scroll by drag or wheel, with an optional lightbox

Avoid when

  • Product views need thumbnails, zoom and fullscreen on a product page → use Product Gallery instead
  • Images must be scanned quickly in a set order; a flat slider is easier to follow → use Carousel instead
  • Dozens of large images would load at once on low-end mobile, where 3D scenes and filler copies cost memory

Installation

node scripts/add.mjs gallery-3d --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["gallery-3d"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/pointer.js, components/gallery-3d/gallery-3d.js, components/gallery-3d/gallery-3d.css.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div id="mv-g3d-demo">
  <style>
    #mv-g3d-demo { display: grid; gap: 2.5rem; width: 100%; }
    #mv-g3d-demo section { display: grid; gap: .5rem; }
    #mv-g3d-demo header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-inline: .5rem; }
    #mv-g3d-demo h3 { margin: 0; font: 700 1.25rem/1.2 var(--mv-font-sans); letter-spacing: -.02em; }
    #mv-g3d-demo header span, #mv-g3d-demo h3 small { font: 400 .85rem var(--mv-font-sans); color: var(--mv-fg-muted); }
  </style>
  <section>
    <header><h3>City guides</h3><span id="mv-g3d-demo-out" aria-live="polite">Drag, or use the arrow keys · variant="ring"</span></header>
    <mv-gallery-3d id="mv-g3d-demo-ring" variant="ring" label="City guides" autoplay lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
  <section>
    <header><h3>Photo archive <small>· variant="dome", drag in any direction</small></h3></header>
    <mv-gallery-3d variant="dome" label="Photo archive" lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
  <section>
    <header><h3>Next departures <small>· variant="circular", drag or scroll sideways</small></h3></header>
    <mv-gallery-3d variant="circular" label="Next departures" bend="3" wheel lightbox>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Hanoi, Vietnam" style="background:linear-gradient(180deg,transparent 86%,#123b36 86%),linear-gradient(#123b36,#123b36) -2% 100% / 14% 38% no-repeat,linear-gradient(#123b36,#123b36) 15% 100% / 12% 42% no-repeat,linear-gradient(#123b36,#123b36) 28% 100% / 14% 50% no-repeat,linear-gradient(#123b36,#123b36) 43% 100% / 13% 37% no-repeat,linear-gradient(#123b36,#123b36) 57% 100% / 14% 42% no-repeat,linear-gradient(#123b36,#123b36) 73% 100% / 16% 51% no-repeat,linear-gradient(#123b36,#123b36) 92% 100% / 15% 49% no-repeat,radial-gradient(circle at 22% 22%,#fff6d6 0 8%,transparent 8.5%),radial-gradient(circle at 22% 22%,#fff6d655 0 16%,transparent 36%),linear-gradient(180deg,#0f3d3e,#3fa38f 55%,#f5e6b8)"></div><figcaption>Hanoi<small>Vietnam · 14 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Cape Town, South Africa" style="background:linear-gradient(180deg,transparent 86%,#1b2f4f 86%),linear-gradient(#1b2f4f,#1b2f4f) -2% 100% / 15% 43% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 15% 100% / 13% 33% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 30% 100% / 9% 32% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 41% 100% / 9% 46% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 50% 100% / 13% 36% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 64% 100% / 14% 48% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 80% 100% / 12% 44% no-repeat,linear-gradient(#1b2f4f,#1b2f4f) 93% 100% / 9% 41% no-repeat,radial-gradient(circle at 76% 28%,#fff3d1 0 8%,transparent 8.5%),radial-gradient(circle at 76% 28%,#fff3d155 0 16%,transparent 36%),linear-gradient(180deg,#12325e,#3f7cc4 55%,#fbd38d)"></div><figcaption>Cape Town<small>South Africa · 21 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Buenos Aires, Argentina" style="background:linear-gradient(180deg,transparent 86%,#2a1640 86%),linear-gradient(#2a1640,#2a1640) -2% 100% / 12% 34% no-repeat,linear-gradient(#2a1640,#2a1640) 12% 100% / 9% 31% no-repeat,linear-gradient(#2a1640,#2a1640) 22% 100% / 9% 37% no-repeat,linear-gradient(#2a1640,#2a1640) 34% 100% / 14% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 48% 100% / 7% 46% no-repeat,linear-gradient(#2a1640,#2a1640) 56% 100% / 10% 42% no-repeat,linear-gradient(#2a1640,#2a1640) 67% 100% / 8% 43% no-repeat,linear-gradient(#2a1640,#2a1640) 76% 100% / 14% 55% no-repeat,linear-gradient(#2a1640,#2a1640) 91% 100% / 9% 43% no-repeat,radial-gradient(circle at 41% 22%,#ffe7d6 0 8%,transparent 8.5%),radial-gradient(circle at 41% 22%,#ffe7d655 0 16%,transparent 36%),linear-gradient(180deg,#3b1d5a,#b0508a 55%,#ffc9a3)"></div><figcaption>Buenos Aires<small>Argentina · 9 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Istanbul, Türkiye" style="background:linear-gradient(180deg,transparent 86%,#35140f 86%),linear-gradient(#35140f,#35140f) -2% 100% / 15% 31% no-repeat,linear-gradient(#35140f,#35140f) 14% 100% / 13% 33% no-repeat,linear-gradient(#35140f,#35140f) 27% 100% / 15% 36% no-repeat,linear-gradient(#35140f,#35140f) 43% 100% / 14% 46% no-repeat,linear-gradient(#35140f,#35140f) 59% 100% / 13% 35% no-repeat,linear-gradient(#35140f,#35140f) 74% 100% / 14% 51% no-repeat,linear-gradient(#35140f,#35140f) 89% 100% / 15% 33% no-repeat,radial-gradient(circle at 54% 25%,#fff0cf 0 8%,transparent 8.5%),radial-gradient(circle at 54% 25%,#fff0cf55 0 16%,transparent 36%),linear-gradient(180deg,#4a1d1d,#d0643c 55%,#ffd59a)"></div><figcaption>Istanbul<small>Türkiye · 26 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Vancouver, Canada" style="background:linear-gradient(180deg,transparent 86%,#0b2233 86%),linear-gradient(#0b2233,#0b2233) -2% 100% / 15% 40% no-repeat,linear-gradient(#0b2233,#0b2233) 13% 100% / 13% 51% no-repeat,linear-gradient(#0b2233,#0b2233) 27% 100% / 11% 55% no-repeat,linear-gradient(#0b2233,#0b2233) 40% 100% / 13% 37% no-repeat,linear-gradient(#0b2233,#0b2233) 54% 100% / 14% 43% no-repeat,linear-gradient(#0b2233,#0b2233) 68% 100% / 14% 30% no-repeat,linear-gradient(#0b2233,#0b2233) 82% 100% / 12% 53% no-repeat,linear-gradient(#0b2233,#0b2233) 95% 100% / 9% 44% no-repeat,radial-gradient(circle at 47% 22%,#f2fbff 0 8%,transparent 8.5%),radial-gradient(circle at 47% 22%,#f2fbff55 0 16%,transparent 36%),linear-gradient(180deg,#0b2942,#2e7ea6 55%,#bfe6f0)"></div><figcaption>Vancouver<small>Canada · 17 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Nairobi, Kenya" style="background:linear-gradient(180deg,transparent 86%,#2b1d08 86%),linear-gradient(#2b1d08,#2b1d08) -2% 100% / 16% 43% no-repeat,linear-gradient(#2b1d08,#2b1d08) 16% 100% / 10% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 28% 100% / 10% 34% no-repeat,linear-gradient(#2b1d08,#2b1d08) 40% 100% / 10% 46% no-repeat,linear-gradient(#2b1d08,#2b1d08) 52% 100% / 7% 44% no-repeat,linear-gradient(#2b1d08,#2b1d08) 61% 100% / 10% 33% no-repeat,linear-gradient(#2b1d08,#2b1d08) 73% 100% / 13% 42% no-repeat,linear-gradient(#2b1d08,#2b1d08) 88% 100% / 14% 32% no-repeat,radial-gradient(circle at 37% 19%,#fff6d9 0 8%,transparent 8.5%),radial-gradient(circle at 37% 19%,#fff6d955 0 16%,transparent 36%),linear-gradient(180deg,#3d2a0c,#c2872f 55%,#fbe3a1)"></div><figcaption>Nairobi<small>Kenya · 12 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Edinburgh, Scotland" style="background:linear-gradient(180deg,transparent 86%,#161b26 86%),linear-gradient(#161b26,#161b26) -2% 100% / 15% 39% no-repeat,linear-gradient(#161b26,#161b26) 14% 100% / 15% 32% no-repeat,linear-gradient(#161b26,#161b26) 31% 100% / 9% 38% no-repeat,linear-gradient(#161b26,#161b26) 41% 100% / 10% 31% no-repeat,linear-gradient(#161b26,#161b26) 54% 100% / 8% 42% no-repeat,linear-gradient(#161b26,#161b26) 64% 100% / 13% 48% no-repeat,linear-gradient(#161b26,#161b26) 80% 100% / 12% 42% no-repeat,linear-gradient(#161b26,#161b26) 94% 100% / 12% 30% no-repeat,radial-gradient(circle at 75% 21%,#f4f6fb 0 8%,transparent 8.5%),radial-gradient(circle at 75% 21%,#f4f6fb55 0 16%,transparent 36%),linear-gradient(180deg,#1d2433,#5b6b8c 55%,#d7dde9)"></div><figcaption>Edinburgh<small>Scotland · 19 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Mexico City, Mexico" style="background:linear-gradient(180deg,transparent 86%,#320a1f 86%),linear-gradient(#320a1f,#320a1f) -2% 100% / 15% 40% no-repeat,linear-gradient(#320a1f,#320a1f) 14% 100% / 8% 34% no-repeat,linear-gradient(#320a1f,#320a1f) 22% 100% / 8% 39% no-repeat,linear-gradient(#320a1f,#320a1f) 32% 100% / 16% 51% no-repeat,linear-gradient(#320a1f,#320a1f) 49% 100% / 11% 47% no-repeat,linear-gradient(#320a1f,#320a1f) 63% 100% / 15% 38% no-repeat,linear-gradient(#320a1f,#320a1f) 79% 100% / 9% 41% no-repeat,linear-gradient(#320a1f,#320a1f) 91% 100% / 16% 49% no-repeat,radial-gradient(circle at 75% 20%,#ffe4d1 0 8%,transparent 8.5%),radial-gradient(circle at 75% 20%,#ffe4d155 0 16%,transparent 36%),linear-gradient(180deg,#4c0f2e,#d23a6b 55%,#ffb88c)"></div><figcaption>Mexico City<small>Mexico · 31 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Sydney, Australia" style="background:linear-gradient(180deg,transparent 86%,#05203a 86%),linear-gradient(#05203a,#05203a) -2% 100% / 8% 42% no-repeat,linear-gradient(#05203a,#05203a) 7% 100% / 9% 38% no-repeat,linear-gradient(#05203a,#05203a) 17% 100% / 12% 31% no-repeat,linear-gradient(#05203a,#05203a) 31% 100% / 12% 30% no-repeat,linear-gradient(#05203a,#05203a) 46% 100% / 9% 36% no-repeat,linear-gradient(#05203a,#05203a) 56% 100% / 9% 42% no-repeat,linear-gradient(#05203a,#05203a) 67% 100% / 14% 48% no-repeat,linear-gradient(#05203a,#05203a) 83% 100% / 11% 41% no-repeat,linear-gradient(#05203a,#05203a) 95% 100% / 11% 56% no-repeat,radial-gradient(circle at 64% 32%,#eefbff 0 8%,transparent 8.5%),radial-gradient(circle at 64% 32%,#eefbff55 0 16%,transparent 36%),linear-gradient(180deg,#062c4a,#1f8ac0 55%,#9fe3f5)"></div><figcaption>Sydney<small>Australia · 23 photos</small></figcaption></figure>
    <figure><div class="mv-gallery-3d-media" role="img" aria-label="Prague, Czechia" style="background:linear-gradient(180deg,transparent 86%,#1d1033 86%),linear-gradient(#1d1033,#1d1033) -2% 100% / 15% 44% no-repeat,linear-gradient(#1d1033,#1d1033) 15% 100% / 11% 33% no-repeat,linear-gradient(#1d1033,#1d1033) 28% 100% / 14% 30% no-repeat,linear-gradient(#1d1033,#1d1033) 45% 100% / 8% 37% no-repeat,linear-gradient(#1d1033,#1d1033) 55% 100% / 11% 51% no-repeat,linear-gradient(#1d1033,#1d1033) 67% 100% / 12% 53% no-repeat,linear-gradient(#1d1033,#1d1033) 79% 100% / 14% 48% no-repeat,linear-gradient(#1d1033,#1d1033) 94% 100% / 9% 55% no-repeat,radial-gradient(circle at 63% 24%,#fde8f4 0 8%,transparent 8.5%),radial-gradient(circle at 63% 24%,#fde8f455 0 16%,transparent 36%),linear-gradient(180deg,#2a1846,#7d4fc0 55%,#f0b8d8)"></div><figcaption>Prague<small>Czechia · 16 photos</small></figcaption></figure>
    </mv-gallery-3d>
  </section>
</div>
<script type="module">
  const ring = document.getElementById("mv-g3d-demo-ring");
  const out = document.getElementById("mv-g3d-demo-out");
  ring.addEventListener("mv-change", (e) => {
    out.textContent = `${e.detail.index + 1} / ${ring.length} · ${e.detail.item.querySelector("figcaption").firstChild.textContent}`;
  });
</script>

API

Attributes

NameTypDefaultDescription
variantring | dome | circularringStaging mode.
labelstringAccessible name of the region.
autoplaybooleanContinuous rotation / scrolling (pauses on hover, on focus and off-screen; disabled with reduced motion).
speednumber10 (°/s) · 40 (px/s for circular)Autoplay speed.
lightboxbooleanOpens the chosen item in a lightbox (modal <dialog>, blurred backdrop).
bendnumber3circular: arc curvature (negative = inverted arc, 0 = straight).
wheelbooleancircular / ring: the vertical wheel also scrolls (horizontal wheel and Shift+wheel always do).
rows / columnsnumber5 / 22dome: rows and columns of tiles (items are repeated to fill the sphere).

Properties

NameTypDescription
indexnumberItem facing front (setting it calls goTo).
lengthnumberNumber of items.
stringsPartial<Record<string, string>>Overrides for every text: roledescription ("3D gallery"), item ("{name} ({index} of {count})"), close ("Close"), preview ("Preview"). English defaults.

Methods

NameDescription
goTo(i) / next() / prev()Brings an item to the front (shortest path).

Events

NameDescription
mv-selectClick, tap, Enter or Space on an item (detail: { index, item }).
mv-changeThe front item changes (detail: { index, item }).

Content structure

NameDescription
childrenEach child is an item (figure with an img or .mv-gallery-3d-media, plus an optional figcaption). Filler copies are aria-hidden.

CSS classes

NameDescription
mv-gallery-3d-item / -media / -scene / -lightboxItem (data-active on the front one), image surface without <img>, 3D scene, lightbox.

CSS variables

NameDefaultDescription
--mv-gallery-3d-height28rem · 32rem · 26remStage height per variant.
--mv-gallery-3d-item-width12rem (14rem circular)Item width (ring, circular; the dome computes its own tiles).
--mv-gallery-3d-item-ratio0.75Item width / height ratio.
--mv-gallery-3d-gap32pxGap between items.
--mv-gallery-3d-perspective1600pxRing perspective.
--mv-gallery-3d-tilt-10degRing tilt.
--mv-gallery-3d-radiusvar(--mv-radius-xl)Item corner radius.
--mv-gallery-3d-fogvar(--mv-bg)Ring: color of the veil over the far side.
--mv-gallery-3d-fadevar(--mv-bg)Dome vignette color.

Accessibility

Region with aria-roledescription "3D gallery"; every item is focusable (role=button unless already interactive) and named "Kyoto (2 of 10)". Arrow keys move to the neighboring item and bring it to the front, Home/End jump to the ends, Enter/Space select. Keyboard focus brings the item to the front and pauses autoplay. Filler copies (dome, endless strip) are aria-hidden and out of the tab order. The lightbox is a modal <dialog> (Escape, backdrop click, Close button). Reduced motion (OS setting or data-motion="reduce"): no autoplay and no coasting, instant settling; dragging still works. Forced colors: items outlined, the front item and focus in Highlight.

Diese Seite wurde mit KI übersetzt. Übersetzungsfehler melden