{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kippen-3d-karten",
 "name": "3D-Kippen von Karten (Tilt)",
 "name_en": "3D tilt card / parallax tilt with glare",
 "kurz": "Eine Geschenkkarte kippt zum Zeiger, mit Parallaxe-Ebenen, wanderndem Kupferglanz und drei gemessenen Varianten (Zentry 3°, Attio 18°, vanilla-tilt 15°).",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "abklingend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "luxuriös",
  "verspielt"
 ],
 "stimmung_roh": [
  "verspielt",
  "haptisch",
  "glänzend"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Karte kippt in 3D zum Zeiger. Die Zeigerposition relativ zur Kartenmitte wird in rotateX und rotateY übersetzt, mit perspective von 500 bis 1500 px. Innere Ebenen liegen per translateZ auf verschiedenen Höhen und verschieben sich dadurch gegeneinander (Parallaxe). Ein Glanzverlauf folgt der Neigung. Beim Verlassen kehrt die Karte weich in die Ruhelage zurück.",
  "warum_es_wirkt": "Die Karte bekommt Gewicht und Material. Sie wirkt wie ein Gegenstand, den man in der Hand dreht. Mit Glanz oder Prägung entsteht ein Sammelkarten- und Wertpapiergefühl.",
  "wann_einsetzen": "Für einzelne Hero-Objekte: Geschenk- oder Kreditkarte, Ticket, Album-Cover, Badge, Mitgliedskarte. Außerdem für Sammel- und Spieloberflächen.",
  "wann_nicht": "Nicht auf Rastern gleichförmiger Feature- oder Produktkarten. Dort wirkt der Effekt 2026 nach Template und lenkt von der Ware ab. Nicht auf Karten mit viel Lesetext, denn gedrehter Text wird unscharf.",
  "varianten": [
   "Dezent: 3° bei perspective 500 px, gedämpft, leichtes Verkleinern auf 0,95 (Zentry)",
   "Deutlich: 18° bei perspective 800 px mit Federphysik und scale 1,02; die Kante unter dem Zeiger sinkt ein (Attio)",
   "Klassisch mit Glanz (vanilla-tilt): Kante hebt sich zum Zeiger, Transition mit cubic-bezier(.03,.98,.52,.99); umgekehrte Richtung per data-tilt-reverse",
   "Tilt mit Pixel-Glitch-Ebenen (Codrops GlitchPerspective)",
   "Holo- oder Folien-Effekt: Farbverlauf mit mix-blend-mode color-dodge folgt der Neigung (eigener Eintrag holo-irisierende-folie)",
   "Geräteneigung per DeviceOrientation auf Mobilgeräten"
  ],
  "umsetzung": "pointermove auf einem stabilen Wrapper: px = x / breite − 0,5, py = y / höhe − 0,5. Daraus rotateX = −py · 2 · max und rotateY = px · 2 · max. Die Karte bekommt transform: perspective(800px) rotateX() rotateY() scale() und transform-style: preserve-3d; die Ebenen darin translateZ (zum Beispiel 18, 30, 44 px). Glättung entweder per CSS-Transition (vanilla-tilt: cubic-bezier(.03,.98,.52,.99), beim Bewegen kurz, beim Verlassen lang), per Feder (Attio: stiffness 80, damping 20, mass 0,1) oder per Dämpfung (Zentry: λ 4). Glanz als Ebene mit radialem Verlauf am Zeigerpunkt, Deckkraft = Abstand zur Mitte × Maximum. Fallstricke: overflow: hidden auf der Karte selbst macht die 3D-Ebenen flach, deshalb nur auf der Grundebene. Kleine Winkel halten Text lesbar. Die Hitbox nicht mitrotieren lassen.",
  "mobil": "Meist ohne Kippen. Ersatz: ein Glanzstreifen beim Tippen. DeviceOrientation ist möglich, braucht auf iOS aber eine Erlaubnisabfrage.",
  "reduzierte_bewegung": "Keine Rotation und kein Skalieren. Der Glanz bleibt statisch, beim Darüberfahren wird nur der Schatten tiefer.",
  "barrierefreiheit": "Der Effekt ist rein dekorativ. Inhalt und Bedienung dürfen nicht vom Kippen abhängen. Den Fokusring auf den Wrapper legen, damit er nicht mitrotiert. Die Karte als Bild mit Alternativtext auszeichnen, wenn sie Informationen trägt (zum Beispiel den Wert)."
 },
 "messwerte": {
  "easing": "cubic-bezier(.03,.98,.52,.99) (vanilla-tilt-Default, typisch); Spring damping 20 / mass .1 / stiffness 80 (Attio); Dämpfung lambda 4, power4.out (Zentry)",
  "dauer_ms": "speed 3000 im Codrops-Demo (sehr träge); typisch 300–600; Scale-Tween 1000 (Zentry)",
  "stagger_ms": "",
  "distanz": "max 15° bzw. 35° (Demo), perspective 1500 px, scale 0.95; max 18° (Attio), 3° (Zentry); perspective 800 px bzw. 500 px; scale 1.02 bzw. .95",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://github.com/codrops/GlitchPerspective (index2.html); https://attio.com/ ; https://zentry.com/"
 },
 "kurve": {
  "bezier": [
   0.03,
   0.98,
   0.52,
   0.99
  ],
  "css": "cubic-bezier(0.03, 0.98, 0.52, 0.99)",
  "name": "eigene Kurve",
  "dauer_ms": 3000
 },
 "gesehen_bei": [
  {
   "seite": "Codrops GlitchPerspective (Repo)",
   "url": "https://github.com/codrops/GlitchPerspective",
   "auszeichnung": "",
   "beobachtung": "3D-Perspektiv-Glitch-Hover (buōy-Website als Vorlage); Quellcode: vanilla-tilt mit max 15/35°, speed 3000, perspective 1500, scale 0.95, Pixel-Rendering per image-rendering: pixelated.",
   "art": "demo"
  },
  {
   "seite": "Codrops ImageTiltEffect (Repo)",
   "url": "https://github.com/codrops/ImageTiltEffect",
   "auszeichnung": "",
   "beobachtung": "Halbtransparente Bildkopien bewegen/rotieren sich für Tiefe.",
   "art": "demo"
  },
  {
   "seite": "Attio",
   "url": "https://attio.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 1qliie6mbb07i.js, ShelfDarkRow5Item): Karte mit [perspective:800px] und preserve-3d; onMouseMove berechnet rotateX = −(y/halbeHöhe)·18, rotateY = (x/halbeBreite)·18; Motion-Springs damping 20, mass .1, stiffness 80; onMouseEnter scale 1.02, onMouseLeave zurück auf 0/1.",
   "art": "website"
  },
  {
   "seite": "Zentry",
   "url": "https://zentry.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (_nuxt/ProductGrid.C7yIFR6H.js): ProductGridItem setzt transform perspective(500px) rotateX/rotateY mit rotMax-Default 3°, gedämpft (lambda 4); bei Rollover scale .95 über 1 s power4.out, Rückstellung auf Mitte nach 0,5 s.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops GlitchPerspective (Repo)",
   "url": "https://github.com/codrops/GlitchPerspective"
  },
  {
   "titel": "Pokémon Cards CSS Holographic Effect (Live-Demo)",
   "url": "https://poke-holo.simey.me/"
  }
 ],
 "kombinierbar_mit": [
  "karten-spotlight-glow",
  "ascii-dither-pixel-stil"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/",
  "meta": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/kippen-3d-karten/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-luecken-b.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "patch-luecken-b.json: Variante ‚Holo-/Foil-Effekt‘ ist jetzt eigener Eintrag holo-irisierende-folie (Glas & Material) mit beobachteten Werten aus der poke-holo-Demo; gegenseitig verlinken.",
   "r3-belege-b.json (Runde 3, 31.10.2026): Zwei Produktionsbelege; Spannbreite zeigt dezente (3°) vs. deutliche (18°) Kippung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Geschenkkarte kippt zum Zeiger, mit Parallaxe-Ebenen, wanderndem Kupferglanz und drei gemessenen Varianten (Zentry 3°, Attio 18°, vanilla-tilt 15°).",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "hitbox": "ganze Bühne (stabiler Wrapper); px, py = Zeigerposition relativ zur Bühne, −0,5 bis 0,5",
   "rotation": "rotateX = −py · 2 · max · richtung; rotateY = px · 2 · max · richtung (richtung 1 = Kante unter dem Zeiger sinkt ein, −1 = hebt sich)",
   "transform": "perspective(Ppx) rotateX() rotateY() scale() auf .karte, transform-style: preserve-3d",
   "variante_dezent": "Zentry: perspective 500 px, max 3°, richtung 1, Dämpfung x += (ziel − x) · (1 − e^(−4·dt)) (λ 4), scale 0,95 in 1000 ms power4.out (1 − (1 − t)^4) beim Betreten und zurück auf 1 beim Verlassen, Rückkehr zur Mitte 500 ms nach dem Verlassen",
   "variante_deutlich": "Attio (Standard): perspective 800 px, max 18°, richtung 1, Feder stiffness 80 / damping 20 / mass 0,1 (Euler in 1-ms-Schritten), scale 1,02 beim Betreten",
   "variante_klassisch": "vanilla-tilt mit Codrops-Werten: perspective 1500 px, max 15°, richtung −1, transition: transform 3000ms cubic-bezier(0.03, 0.98, 0.52, 0.99), scale 0,95",
   "parallaxe_translateZ_px": {
    "zweig": 18,
    "kopfzeile": 30,
    "wert": 44
   },
   "glanz": "radial-gradient am Zeigerpunkt (gx = 50 % + px · 110 %, gy = 50 % + py · 130 %), mix-blend-mode: screen, Deckkraft = min(1, Abstand · 2) · 0,5; Ausblenden 600 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "folie": "Kupfer-Verlauf per background-clip: text, background-size 260 %, background-position 50 % + (rotateY / max) · 42 %",
   "schatten": "blur 28 px, translate(−rotateY · 1,4 px, 22 + rotateX · 1,2 px), scale 0,92 · (2 − scale)",
   "ui": "Wertwechsel opacity 200 ms, Buttons 200 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "touch_glanzlauf": "linear-gradient-Streifen 105°, 1000 ms cubic-bezier(0.25, 1, 0.5, 1)",
   "vorfuehrung": "7000 ms pro Runde: Einfahrt 10 %, Lissajous-Bahn x = 0,5 + 0,36 · sin(w + 1,2), y = 0,5 + 0,28 · sin(2w + 2,4) über 72 %, Ausfahrt 18 %",
   "karte": "Seitenverhältnis 1,586 (Scheckkarte), Breite min(460 px, 70 %), Schriftgrößen in cqw"
  },
  "ausloeser": "hover",
  "touch": "Kein Kippen. Tippen auf die Bühne lässt einen Glanzstreifen einmal über die Karte laufen (1000 ms). Variantenschalter und Werte sind ausgeblendet.",
  "reduziert": "Keine Rotation, kein Skalieren. Der Glanz steht als statischer Lichtverlauf oben links. Beim Darüberfahren wird nur der Schatten tiefer (Deckkraft in 150 ms). Kein Glanzlauf auf Touch.",
  "korrekturen": {
   "beschreibung": "Eine Karte kippt in 3D zum Zeiger. Die Zeigerposition relativ zur Kartenmitte wird in rotateX und rotateY übersetzt, mit perspective von 500 bis 1500 px. Innere Ebenen liegen per translateZ auf verschiedenen Höhen und verschieben sich dadurch gegeneinander (Parallaxe). Ein Glanzverlauf folgt der Neigung. Beim Verlassen kehrt die Karte weich in die Ruhelage zurück.",
   "warum_es_wirkt": "Die Karte bekommt Gewicht und Material. Sie wirkt wie ein Gegenstand, den man in der Hand dreht. Mit Glanz oder Prägung entsteht ein Sammelkarten- und Wertpapiergefühl.",
   "wann_einsetzen": "Für einzelne Hero-Objekte: Geschenk- oder Kreditkarte, Ticket, Album-Cover, Badge, Mitgliedskarte. Außerdem für Sammel- und Spieloberflächen.",
   "wann_nicht": "Nicht auf Rastern gleichförmiger Feature- oder Produktkarten. Dort wirkt der Effekt 2026 nach Template und lenkt von der Ware ab. Nicht auf Karten mit viel Lesetext, denn gedrehter Text wird unscharf.",
   "varianten": [
    "Dezent: 3° bei perspective 500 px, gedämpft, leichtes Verkleinern auf 0,95 (Zentry)",
    "Deutlich: 18° bei perspective 800 px mit Federphysik und scale 1,02; die Kante unter dem Zeiger sinkt ein (Attio)",
    "Klassisch mit Glanz (vanilla-tilt): Kante hebt sich zum Zeiger, Transition mit cubic-bezier(.03,.98,.52,.99); umgekehrte Richtung per data-tilt-reverse",
    "Tilt mit Pixel-Glitch-Ebenen (Codrops GlitchPerspective)",
    "Holo- oder Folien-Effekt: Farbverlauf mit mix-blend-mode color-dodge folgt der Neigung (eigener Eintrag holo-irisierende-folie)",
    "Geräteneigung per DeviceOrientation auf Mobilgeräten"
   ],
   "umsetzung": "pointermove auf einem stabilen Wrapper: px = x / breite − 0,5, py = y / höhe − 0,5. Daraus rotateX = −py · 2 · max und rotateY = px · 2 · max. Die Karte bekommt transform: perspective(800px) rotateX() rotateY() scale() und transform-style: preserve-3d; die Ebenen darin translateZ (zum Beispiel 18, 30, 44 px). Glättung entweder per CSS-Transition (vanilla-tilt: cubic-bezier(.03,.98,.52,.99), beim Bewegen kurz, beim Verlassen lang), per Feder (Attio: stiffness 80, damping 20, mass 0,1) oder per Dämpfung (Zentry: λ 4). Glanz als Ebene mit radialem Verlauf am Zeigerpunkt, Deckkraft = Abstand zur Mitte × Maximum. Fallstricke: overflow: hidden auf der Karte selbst macht die 3D-Ebenen flach, deshalb nur auf der Grundebene. Kleine Winkel halten Text lesbar. Die Hitbox nicht mitrotieren lassen.",
   "mobil": "Meist ohne Kippen. Ersatz: ein Glanzstreifen beim Tippen. DeviceOrientation ist möglich, braucht auf iOS aber eine Erlaubnisabfrage.",
   "reduzierte_bewegung": "Keine Rotation und kein Skalieren. Der Glanz bleibt statisch, beim Darüberfahren wird nur der Schatten tiefer.",
   "barrierefreiheit": "Der Effekt ist rein dekorativ. Inhalt und Bedienung dürfen nicht vom Kippen abhängen. Den Fokusring auf den Wrapper legen, damit er nicht mitrotiert. Die Karte als Bild mit Alternativtext auszeichnen, wenn sie Informationen trägt (zum Beispiel den Wert)."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept mode-beauty-kollektion mit der erfundenen Hautpflegemarke Leutra aus Jena (Zalando Sans wdth 125, Fragment Mono, warmes Off-White, Fast-Schwarz). Das Rezept schließt Tilt auf Produktkarten aus; die Demo nutzt den Effekt deshalb regelkonform auf einem einzelnen Hero-Objekt, der Geschenkkarte auf der Produktseite. Karte ganz aus CSS und Inline-SVG (Oxblut, Kupferprägung, Hagebuttenzweig), Wertwahl ändert Karte und Preis. Ganze Bühne ist die Hitbox. Drei Varianten mit drei Glättungsarten (Dämpfung, Feder, CSS-Transition) und Live-Anzeige von rX, rY und scale. Vorführung zeichnet mit gedachtem Zeiger eine Lissajous-Bahn über die Bühne. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: --meta #8C857B auf #69645C (4,8:1 auf Fläche, Pult-Labels eingeschlossen), Kontrastmodus: Folientext (background-clip: text) als CanvasText, Knopfrahmen, gewählter Wert mit Highlight-Outline."
 }
}