{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "css-3d-transforms",
 "name": "CSS-3D-Räume und -Objekte",
 "name_en": "CSS 3D transforms (cards, carousels, voxel)",
 "kurz": "Ein Sideboard aus echten HTML-Flächen zum Drehen, Öffnen und Zerlegen, dazu Tilt-Karte und Klappkarten.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "leicht",
  "taktil"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Container bekommt perspective (800 bis 2000 px), die Ebenen darunter transform-style: preserve-3d. So liegen alle Kinder im selben Raum. Jedes Teil wird mit rotateX, rotateY und translateZ platziert: Quader aus sechs Flächen, Türen mit Scharnier, Kartenstapel, Faltungen, Zylinder-Karussells mit rotateY(i · 360/n) translateZ(r). Gedreht wird per Zeiger (Tilt), per Ziehen, per Klick oder scroll-gekoppelt mit animation-timeline: view() bzw. scroll(). Alles bleibt echtes HTML: lesbar, markierbar, fokussierbar.",
  "warum_es_wirkt": "Echte räumliche Tiefe mit zugänglichem, markierbarem HTML. Leicht, ohne WebGL und ohne Modelldateien. Ein Objekt, das man drehen, öffnen und zerlegen kann, erklärt Aufbau und Maße schneller als ein Foto.",
  "wann_einsetzen": "Karten-Tilt, Klappkarten mit Vorder- und Rückseite, Produktmodelle aus einfachen Körpern (Möbel, Verpackung, Geräte), Explosionszeichnungen, 3D-Karussells, Buch- und Faltinteraktionen, Ticket- und Kreditkarten-Mockups, flache Flächen, die sich räumlich aufklappen.",
  "wann_nicht": "Bei runden oder komplexen Formen, echtem Licht, Schatten und Materialien: dann WebGL. Bei sehr vielen Flächen wird die Tiefensortierung des Browsers langsam und zeigt Fehler.",
  "varianten": [
   "Objekt im Raum: Quader aus Flächen, drehbar, mit Zuständen wie Öffnen und Explosion",
   "Tilt-Karte mit Glanz und Ebenen in der Tiefe",
   "Klappkarte: rotateX(180deg), Rückseite mit backface-visibility: hidden",
   "Zylinder-Karussell",
   "Flache Fläche klappt beim Scrollen auf (rotateX 90° → 0)",
   "Voxel aus gestapelten CSS-Grids (experimentell)",
   "Scroll-getriebene 3D-Galerie ohne JS"
  ],
  "umsetzung": "perspective auf den Container, transform-style: preserve-3d auf jede Ebene dazwischen. backface-visibility: hidden gegen Flackern und für Rückseiten. Kein overflow: hidden, filter, opacity unter 1 oder clip-path auf Elementen mit preserve-3d, das flacht den Raum ab. Auf einzelnen Flächen und am Container mit perspective ist es erlaubt. Drehpunkte wie Scharniere über translate, rotate und zurück-translate oder über transform-origin. Licht gibt es nicht: Helligkeit je Fläche selbst aus der gedrehten Normalen berechnen oder fest pro Seite vergeben. Beschriftungen im Raum: unsichtbaren Anker an das Teil hängen, seine Position mit getBoundingClientRect lesen und den Text flach darüberlegen. Text mit translateZ kann unscharf werden, auf ganze Pixel achten. Scroll-Driven Animations laufen in Chromium und Safari 26. In Firefox prüfen, sonst statisch zeigen.",
  "mobil": "Tilt auf Touch nur, solange der Finger auf der Karte liegt (oder per Gyro), sonst aus. Drehen per waagerechtem Wischen, touch-action: pan-y lässt senkrechtes Scrollen frei. Klappkarten per Tippen. Objekte kleiner einpassen und Beschriftungen kürzen.",
  "reduzierte_bewegung": "Flache oder feste Ansicht, Drehen und Kippen aus. Zustände springen ohne Animation, Rückseiten blenden kurz über statt zu drehen.",
  "barrierefreiheit": "DOM-Reihenfolge = Lesereihenfolge. Verdeckte Rückseiten mit inert oder aria-hidden aus dem Fokus nehmen. Drehbare Objekte fokussierbar machen und per Pfeiltasten bedienbar, Zustände als echte Buttons mit aria-pressed. Ein Modell aus vielen Flächen bekommt role=\"img\" und eine Beschreibung. Beschriftungen bleiben markierbarer Text."
 },
 "messwerte": {
  "easing": "cubic-bezier(.2,.8,.2,1) für Tilt-Rückkehr",
  "dauer_ms": "Tilt-Reset 400–600",
  "stagger_ms": "",
  "distanz": "perspective 800–2000px; Tilt max. 8–15°",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.2,
   0.8,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.2, 0.8, 0.2, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Cursor – Logo-Flip-Raster",
   "url": "https://www.cursor.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: .logo-flip-card mit perspective 1000px, Innenseite transform-style: preserve-3d, transition transform .6s ease-in-out, .flipped = rotateX(180deg); Vorder-/Rückseite mit backface-visibility: hidden, Rückseite vorab rotateX(180deg). Unter prefers-reduced-motion keine Transition und kein Flip. Sauberes Produktionsbeispiel für eine CSS-3D-Klappkarte.",
   "art": "website"
  },
  {
   "seite": "Pitch",
   "url": "https://pitch.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: Framer-Komponente ScrollGradient – 100vh-Fläche mit transform-origin 50% 0 klappt scroll-gekoppelt von rotateX(90deg) auf 0 (useScroll offset ['start end','end start']). Beispiel für ‚flache Seite wird räumlich‘ ohne WebGL.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "karten-spotlight-glow",
  "3d-karussell-zylinder"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/css-3d-transforms/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-luecken-a.json"
  ],
  "pruefnotizen": [
   "patch-luecken-a.json: Muster hatte keinen einzigen gesehen_bei-Eintrag; zwei live geprüfte Belege ergänzt (Flip-Karte, Scroll-Aufklappen). Bestehende messwerte (Tilt) bleiben, Flip-Werte stehen in der Beobachtung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Sideboard aus echten HTML-Flächen zum Drehen, Öffnen und Zerlegen, dazu Tilt-Karte und Klappkarten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kurve": "cubic-bezier(0.2, 0.8, 0.2, 1) für alle räumlichen Bewegungen",
   "ui": "150 ms cubic-bezier(0.4, 0, 0.2, 1) für Buttons und Umschalter (Rezept)",
   "objekt_perspektive": "perspective 1400px, perspective-origin 50% 42%",
   "objekt_ansicht": "rotateX(-20deg) rotateY(-34deg); Ziehen 0,35°/px waagerecht, 0,2°/px senkrecht, rotateX begrenzt auf -38° bis -6°; Schwung klingt mit Faktor 0,92 je Bild aus; Pfeiltasten ±15° in 450 ms",
   "objekt_tueren": "rotateY 0 → ±100° um die Scharnierkante, 900 ms",
   "objekt_schubkaesten": "translateZ 32 cm (oben) und 24 cm (unten), 900 ms, unterer +120 ms",
   "objekt_explosion": "1200 ms, Versatz 40 ms je Teil (10 Stufen), Korpus hebt sich 14 cm, Einzelwege bis 36 cm (Deckplatte), Schubkästen 48 cm nach vorn; Beschriftungen ab 55 % Fortschritt",
   "objekt_licht": "Helligkeit je Fläche = 0,64 + 0,44 · max(0, n·L), L = normalisiert(-0,4; -0,75; 0,85), n = Flächennormale nach allen Drehungen",
   "objekt_masstab": "1 cm = 3 px, Objekt per scale3d auf die Bühne eingepasst (Breite / (540 px · 1,62), Telefon 1,32)",
   "karte_perspektive": "perspective 1000px",
   "karte_tilt": "max. 10° (rotateX/rotateY aus Zeigerposition -1 … 1)",
   "karte_ebenen": "translateZ 8 / 14 / 26 / 40 px (Fuß, Muster, Kopf, Etikett)",
   "karte_folgen": "transition transform 120 ms linear",
   "karte_rueckkehr": "transition transform 500 ms cubic-bezier(0.2, 0.8, 0.2, 1)",
   "karte_glanz": "radial-gradient weiß .55 → .12 (32 %) → transparent (62 %), folgt dem Zeiger, Deckkraft 0 → 1",
   "klapp_perspektive": "perspective 1000px je Karte",
   "klapp_drehung": "rotateX 0 → 180deg, 600 ms, Rückseite backface-visibility: hidden und inert, solange verdeckt",
   "vorfuehrung": "Objekt: 12-s-Runde, rotateY -34° ± 20°, rotateX -20° ± 6°, geöffnet ab 1,5 s, Explosion ab 4,8 s, geschlossen ab 8,8 s; Tilt-Karte: 5,2-s-Runde mit gedachtem Zeiger; Klappkarten: je 1,7 s offen, 450 ms Pause"
  },
  "ausloeser": "ziehen",
  "touch": "Objekt dreht per waagerechtem Wischen (touch-action: pan-y, senkrechtes Scrollen bleibt frei), Zustände per Tippen auf die Buttons, Beschriftungen nur mit Titel. Tilt-Karte kippt, solange der Finger auf ihr liegt, und federt beim Loslassen zurück. Klappkarten klappen per Tippen, immer nur eine offen. Untere Leiste mit Anrufen und Anfrage.",
  "reduziert": "Feste Ansicht rotateX(-20°) rotateY(-34°), Ziehen und Pfeiltasten drehen nicht. Zustände springen ohne Animation. Tilt-Karte bleibt flach, ohne Glanz. Klappkarten drehen nicht, die Rückseite blendet in 150 ms über.",
  "korrekturen": {
   "beschreibung": "Ein Container bekommt perspective (800 bis 2000 px), die Ebenen darunter transform-style: preserve-3d. So liegen alle Kinder im selben Raum. Jedes Teil wird mit rotateX, rotateY und translateZ platziert: Quader aus sechs Flächen, Türen mit Scharnier, Kartenstapel, Faltungen, Zylinder-Karussells mit rotateY(i · 360/n) translateZ(r). Gedreht wird per Zeiger (Tilt), per Ziehen, per Klick oder scroll-gekoppelt mit animation-timeline: view() bzw. scroll(). Alles bleibt echtes HTML: lesbar, markierbar, fokussierbar.",
   "warum_es_wirkt": "Echte räumliche Tiefe mit zugänglichem, markierbarem HTML. Leicht, ohne WebGL und ohne Modelldateien. Ein Objekt, das man drehen, öffnen und zerlegen kann, erklärt Aufbau und Maße schneller als ein Foto.",
   "wann_einsetzen": "Karten-Tilt, Klappkarten mit Vorder- und Rückseite, Produktmodelle aus einfachen Körpern (Möbel, Verpackung, Geräte), Explosionszeichnungen, 3D-Karussells, Buch- und Faltinteraktionen, Ticket- und Kreditkarten-Mockups, flache Flächen, die sich räumlich aufklappen.",
   "wann_nicht": "Bei runden oder komplexen Formen, echtem Licht, Schatten und Materialien: dann WebGL. Bei sehr vielen Flächen wird die Tiefensortierung des Browsers langsam und zeigt Fehler.",
   "varianten": [
    "Objekt im Raum: Quader aus Flächen, drehbar, mit Zuständen wie Öffnen und Explosion",
    "Tilt-Karte mit Glanz und Ebenen in der Tiefe",
    "Klappkarte: rotateX(180deg), Rückseite mit backface-visibility: hidden",
    "Zylinder-Karussell",
    "Flache Fläche klappt beim Scrollen auf (rotateX 90° → 0)",
    "Voxel aus gestapelten CSS-Grids (experimentell)",
    "Scroll-getriebene 3D-Galerie ohne JS"
   ],
   "umsetzung": "perspective auf den Container, transform-style: preserve-3d auf jede Ebene dazwischen. backface-visibility: hidden gegen Flackern und für Rückseiten. Kein overflow: hidden, filter, opacity unter 1 oder clip-path auf Elementen mit preserve-3d, das flacht den Raum ab. Auf einzelnen Flächen und am Container mit perspective ist es erlaubt. Drehpunkte wie Scharniere über translate, rotate und zurück-translate oder über transform-origin. Licht gibt es nicht: Helligkeit je Fläche selbst aus der gedrehten Normalen berechnen oder fest pro Seite vergeben. Beschriftungen im Raum: unsichtbaren Anker an das Teil hängen, seine Position mit getBoundingClientRect lesen und den Text flach darüberlegen. Text mit translateZ kann unscharf werden, auf ganze Pixel achten. Scroll-Driven Animations laufen in Chromium und Safari 26. In Firefox prüfen, sonst statisch zeigen.",
   "mobil": "Tilt auf Touch nur, solange der Finger auf der Karte liegt (oder per Gyro), sonst aus. Drehen per waagerechtem Wischen, touch-action: pan-y lässt senkrechtes Scrollen frei. Klappkarten per Tippen. Objekte kleiner einpassen und Beschriftungen kürzen.",
   "reduzierte_bewegung": "Flache oder feste Ansicht, Drehen und Kippen aus. Zustände springen ohne Animation, Rückseiten blenden kurz über statt zu drehen.",
   "barrierefreiheit": "DOM-Reihenfolge = Lesereihenfolge. Verdeckte Rückseiten mit inert oder aria-hidden aus dem Fokus nehmen. Drehbare Objekte fokussierbar machen und per Pfeiltasten bedienbar, Zustände als echte Buttons mit aria-pressed. Ein Modell aus vielen Flächen bekommt role=\"img\" und eine Beschreibung. Beschriftungen bleiben markierbarer Text."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Schreinerei Gramlich, Würzburg-Heidingsfeld, Rezept handwerk-werkstatt-klartext (Special Gothic mit wdth 75 für Gewerk-Labels, Atkinson Hyperlegible Next, Materialfarben, Signal #FB6100 nur für Anfrage und Anruf, Telefon im Kopf und mobile Leiste). Bildwelt nur aus CSS-Flächen, keine Fotos, keine Holz-Fake-Textur. Variante 1 baut ein Sideboard (180 × 76 × 45 cm) aus 22 Quadern mit 132 Flächen: Scharnier-Türen, Schubkästen als Gruppe, Explosion mit Versatz, Bemaßung flach auf dem Boden, Beschriftungen über Anker, die einer freien Seite ausweichen. Weil die Helligkeit jeder Fläche aus der gedrehten Normalen berechnet wird, laufen die Zustände als JS-Tween mit der Muster-Kurve statt als CSS-Transition. Variante 2 ist eine Musterkarte mit Tilt, Glanz und Ebenen, Variante 3 sind Klappkarten mit Ab-Preisen (Werte wie bei Cursor: perspective 1000px, rotateX 180°, 600 ms). Das Zylinder-Karussell hat ein eigenes Muster (3d-karussell-zylinder) und fehlt hier bewusst. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: Unter 900 px Szene minmax(0, 1fr) statt 1fr (320 px ohne Querscrollen in allen drei Modi), Modus-Leiste darf unter 560 px umbrechen; Kontrastmodus-Rahmen für Knöpfe."
 }
}