/* ========================================================= Innovando Swiss — Swup Transition: t-flip3d (giro pagina 3D) Requisiti:
…
Attiva: (lo fa lo script) ========================================================= */ :root{ --swup-in: 800ms; /* durata animazione entrata */ --swup-out: 700ms; /* durata animazione uscita */ --swup-ease: cubic-bezier(.25,.8,.25,1); --swup-bg: #ffffff; /* colore del “foglio” */ } /* Base container */ #swup.transition-scope{ position: relative; transform-style: preserve-3d; } /* Overlay “foglio” che esegue il flip */ html.t-flip3d #swup.transition-scope::before{ content:""; position: fixed; inset: 0; background: var(--swup-bg); transform-origin: left center; transform: rotateY(0deg); backface-visibility: hidden; z-index: 999999; /* sopra tutto */ pointer-events: none; opacity: 0; box-shadow: 0 0 40px rgba(0,0,0,.25); } /* Keyframes */ @keyframes flipOut { 0% { transform: rotateY(0deg); opacity: 1; } 55% { transform: rotateY(-100deg); opacity: 1; } 100% { transform: rotateY(-92deg); opacity: 0; } } @keyframes flipIn { 0% { transform: rotateY(-92deg); opacity: 0; } 40% { transform: rotateY(-25deg); opacity: 1; } 100% { transform: rotateY(0deg); opacity: 1; } } /* Uscita: avvia il “giro pagina” che copre la view */ html.t-flip3d.is-changing.is-leaving #swup.transition-scope::before{ animation: flipOut var(--swup-out) var(--swup-ease) forwards; opacity: 1; } /* Entrata: completa il giro e svanisce */ html.t-flip3d.is-changing.is-rendering #swup.transition-scope::before{ animation: flipIn var(--swup-in) var(--swup-ease) forwards; opacity: 1; } /* Riduzione movimento: niente 3D, niente animazione */ @media (prefers-reduced-motion: reduce){ html.t-flip3d #swup.transition-scope::before{ display: none !important; } }