Perspectiva: El error 100%x que destruye tus transiciones 3D 🤯
Si alguna vez intentaste una vista cruzada con un flip 3D y el resultado fue una cara plana, no eres el único que se quedó confundido. El problema no está en la animación ni en las transiciones; está en la forma en que
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo web
Fuente
dev.to
Puntos clave
- Si alguna vez intentaste una vista cruzada con un flip 3D y el resultado fue una cara plana, no eres el único que se quedó confundido.
- El problema no está en la animación ni en las transiciones; está en la forma en que los navegadores renderizan el árbol pseudoelemento de la transición. Cuando usamos la propiedad perspective en html, :root o body, el mo
- La solución no es aplicar perspectiva, es usar la función perspectiva() dentro del keyframe. De esta manera la transformación se aplica directamente al elemento que está siendo animado, sin depender de un padre que no ex
- `@keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); } 100% { transform: perspective(1100px) rotateY(-90deg); } }
Bloque 1
Si alguna vez intentaste una vista cruzada con un flip 3D y el resultado fue una cara plana, no eres el único que se quedó confundido.
El problema no está en la animación ni en las transiciones; está en la forma en que los navegadores renderizan el árbol pseudoelemento de la transición. Cuando usamos la propiedad perspective en html, :root o body, el motor simplemente los ignora porque la capa de la transición se crea fuera del flujo normal.
Bloque 2
La solución no es aplicar perspectiva, es usar la función perspectiva() dentro del keyframe. De esta manera la transformación se aplica directamente al elemento que está siendo animado, sin depender de un padre que no existe en el árbol de la transición.
• `@keyframes flip-out { 0% { transform: perspective(1100px) rotateY(0deg); } 100% { transform: perspective(1100px) rotateY(-90deg); } } • `::view-transition-old(root) { animation: flip-out .3s forwards; } • `::view-transition-new(root) { animation: flip-in .3s forwards; }
Bloque 3
El resultado: la página entera gira como si tuviera una profundidad real, y la transición se ve fluida y elegante.
No necesitas ninguna librería ni JavaScript extra; solo un pequeño cambio en los keyframes.
Bloque 4
¿Alguna vez has enfrentado este mismo rollo con view‑transition y otros efectos 3D? ¿Qué trucos has descubierto para forzar la profundidad en CSS?