Perspective
Redactado por
Sebastian V. Fecha de publicación
19/07/2024
Tiempo de lectura
7 min
Tema
CSS Transform
El ojo que todo lo ve
Piensa en cómo funciona una cámara fotográfica. Usando un gran angular (lente de distancia focal corta), los objetos cercanos parecen enormes y los lejanos se ven diminutos: la perspectiva es exagerada. Con un teleobjetivo (distancia focal larga), la diferencia de tamaño entre objetos cercanos y lejanos se comprime: todo parece estar casi en el mismo plano.
perspective en CSS funciona exactamente igual. Define la distancia desde la que el "ojo virtual del navegador" observa el espacio 3D. Y esa distancia cambia completamente cómo se perciben todas las transformaciones 3D dentro de esa escena.
Valores y su impacto visual
Los valores de perspective se expresan en píxeles y representan la distancia imaginaria del espectador al plano de la pantalla:
- 200px – 500px: Perspectiva muy cercana y dramática. Las rotaciones parecen muy exageradas, como una lente gran angular. Ideal para efectos de impacto visual fuerte.
- 600px – 1000px: El rango más usado en interfaces premium. Perspectiva natural y realista. Suficiente distorsión para transmitir 3D sin parecer exagerado.
- 1500px – 3000px: Perspectiva distante, casi plana. Las rotaciones se ven sutiles. Útil cuando quieres un toque de 3D sin que parezca demasiado dramático.
- none: Sin perspectiva. Todo se aplana, las rotaciones solo parecen escalados.
perspective-origin: cambiando el punto de vista
Así como puedes mover transform-origin para cambiar desde dónde gira un elemento, puedes usar perspective-origin para cambiar desde dónde miras la escena 3D entera.
Por defecto es 50% 50% (el centro). Pero si lo cambias a 0% 0% verás la escena desde la esquina superior izquierda, creando una perspectiva isométrica. Si lo pones en 80% 20%, el punto de fuga se mueve hacia la derecha y arriba.
Esta propiedad es especialmente útil para crear composiciones 3D con un estilo específico, como las ilustraciones isométricas que están muy de moda en las landing pages de productos SaaS.
Perspectiva en transform() vs en el padre
Hay dos formas de aplicar perspectiva: perspective como propiedad en el padre (lo que hemos aprendido) y perspective() como función dentro de transform. La diferencia es sutil pero importante: cuando la perspectiva está en el padre, todos los hijos comparten el mismo punto de fuga, creando una escena cohesionada. Cuando se usa en el transform del elemento, cada elemento tiene su propio punto de fuga independiente.
Consejo profesional
Como regla práctica: perspective entre 600px y 900px es el rango que produce los efectos de tarjeta flip y rotación más naturales y usables en interfaces reales. Valores menores de 400px empiezan a verse como un efecto de ojo de pez que puede marear a los usuarios. Reserva las perspectivas dramáticas para elementos decorativos, no para contenido funcional.
El impacto del valor de Perspective
<!-- La perspectiva va en el padre -->
<div class="escena-perspectiva">
<div class="tarjeta-perspectiva">
<div class="p-6 text-center">
<h4 style="color: var(--color-bg)">Perspectiva: 400px - Dramática y cercana</h4>
</div>
</div>
</div>
<!-- Comparación con perspectiva distante -->
<div class="escena-perspectiva-lejana">
<div class="tarjeta-perspectiva azul">
<div class="p-6 text-center">
<h4 style="color: var(--color-bg)">Perspectiva: 2000px - Sutil y ortogonal</h4>
</div>
</div>
</div>300px - Dramática
1500px - Sutil
Dos tarjetas con la misma rotateY(25deg) pero perspectivas diferentes. Observa cómo la misma transformación se ve completamente diferente con perspective: 300px vs 1500px.
Errores comunes
Calibra tu escena
Crea un slider de valores de perspective y experimenta en tiempo real con JavaScript cómo el mismo elemento 3D se ve completamente diferente al cambiar de 200px a 2000px.