diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 25a13c0..17b8bb0 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -42,6 +42,9 @@ transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; + + transform-style: preserve-3d; + perspective: 800px; } /* Hover nur mit leichtem Leuchten und Zoom */ @@ -59,4 +62,35 @@ .door canvas { pointer-events: none; +} + +/* Vorderseite – Standardansicht */ +.door::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: inherit; + backface-visibility: hidden; + z-index: 1; +} + +/* Rückseite – nach dem Öffnen sichtbar */ +.door::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: rgba(255, 255, 255, 0.08); /* leicht transparent wie Loch */ + box-shadow: inset 0 0 6px rgba(255,255,255,0.15); + transform: rotateY(180deg); + backface-visibility: hidden; +} + +/* Geöffneter Zustand */ +.door.open { + transform: rotateY(180deg); + box-shadow: + 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), + inset 0 0 10px rgba(255,255,255,0.2); } \ No newline at end of file