Cuando trabajas con transformaciones tridimensionales en CSS, es fundamental que entiendas cómo funcionan las propiedades relacionadas y cómo puedes lograr efectos impactantes. Una de las más importantes es perspective origin en CSS, ya que determina desde dónde se percibe la perspectiva de los elementos en una escena 3D. En este artículo, voy a contarte qué es perspective origin, para qué sirve y cómo puedes usarlo con algunos ejemplos que seguro te ayudarán.
¿Qué es perspective origin en CSS?
En CSS, existen varias propiedades que se utilizan para crear y manejar efectos 3D, como transform, transform-style o perspective. Entre esta variedad, la propiedad perspective origin es la encargada de establecer el punto de vista desde el cual se observa la perspectiva tridimensional aplicada a un elemento. Dicho de otra forma, es la propiedad que define el origen de la “cámara” que mira hacia los elementos en 3D, un punto que puede moverse horizontal y verticalmente para ajustar cómo se percibe la profundidad y los ángulos de los elementos en tus diseños.
Pero, ¿cuál es entonces su diferencia con perspective? Podemos decir que, mientras la propiedad perspective define la intensidad de la perspectiva, o sea, qué tan cerca o lejos está la “cámara”, perspective origin decide el lugar desde el cual observamos esa perspectiva. Así que combinar ambas propiedades es indispensable para crear efectos realistas e inmersivos en tus diseños.
¿Para qué sirve perspective origin en CSS?
Esta propiedad es útil cuando quieres ajustar la perspectiva para que se alinee con la intención de diseño o para dar más realismo a tus animaciones. Veamos con más detalle algunos de sus usos principales:
Ajustar el punto de fuga
El punto de fuga es el lugar donde las líneas paralelas parecen converger en un espacio tridimensional. Por ejemplo, si has visto dibujos técnicos o paisajes con perspectiva, habrás notado que las líneas tienden a unirse en un punto específico del horizonte. En el caso de CSS, la propiedad perspective origin te permite mover este punto de fuga para adaptarlo a la composición de tu diseño y que el resultado sea mucho más estético y agradable.
Crear efectos dinámicos en 3D
Cuando usas transformaciones como rotateX, rotateY o rotateZ, puedes ajustar el punto de vista desde el cual se percibe la animación, lo que va a cambiar completamente la experiencia visual en tu sitio. Para esto, es muy útil la propiedad perspective origin, ya que te permite decidir exactamente desde dónde se perciben esos giros y movimientos tridimensionales.
Personalizar diseños interactivos
Cuando diseñas una página web, crear experiencias inmersivas resulta ser fundamental para mantener al usuario comprometido con el sitio. En ese sentido, la propiedad perspective origin te ayuda a crear interfaces tridimensionales más flexibles, así como adaptarlas a tus necesidades y las de tus usuarios. Así que puedes personalizar cómo se perciben los elementos en 3D dependiendo del contexto visual de tu diseño.
Sintaxis de perspective origin en CSS
La sintaxis de esta propiedad es muy sencilla y sigue un formato de dos valores: uno para el eje horizontal y otro para el eje vertical.
perspective-origin: x y;
Valores permitidos
- Eje horizontal (x): Puede ser un valor en píxeles, un porcentaje o palabras clave como left, center y right.
- Eje vertical (y): De forma similar al eje horizontal, puede definirse en píxeles, porcentajes o con palabras clave como top, center y bottom.
El valor por defecto de perspective origin es de 50/50, lo que significa que la perspectiva se centra en el medio del contenedor.
Ejemplo de perspective origin en CSS
Nada mejor que un ejemplo práctico para entender cómo funciona esta propiedad. Por eso, imagina que tienes un contenedor con varias tarjetas que giran en 3D y quieres cambiar el punto de vista.
HTML
<div class="container">
<div class="card">Tarjeta 1</div>
<div class="card">Tarjeta 2</div>
</div>
CSS
.container {
perspective: 800px;
perspective-origin: left top;
}
.card {
width: 150px;
height: 200px;
background: lightblue;
transform: rotateY(30deg);
margin: 10px;
}En este ejemplo, la perspectiva tiene una distancia de 800px, mientras el punto de vista está en la esquina superior izquierda (left top), lo que hace que las tarjetas parezcan inclinarse hacia ese punto.
Diferencia entre perspective y perspective origin en CSS
Es posible que todavía te estés preguntando cuál es la diferencia entre perspective y perspective origin, pero no te preocupes. Aunque estas dos propiedades están relacionadas, cumplen funciones distintas:
- perspective: Se utiliza para controlar la intensidad de la perspectiva. Así, cuanto menor sea el valor, más pronunciado será el efecto.
- perspective-origin: Permite ajustar el punto de fuga, es decir, desde dónde se percibe la perspectiva.
Piensa en perspective como el zoom de una cámara y en perspective-origin como la dirección en la que apuntas esa cámara.
Si quieres aprender nuevas herramientas y técnicas para empezar una nueva carrera en el sector de la tecnología, el Bootcamp de Desarrollo Web de KeepCoding es la oportunidad perfecta para ti. Con nuestro curso, podrás aprender en pocos meses a crear sitios y aplicaciones web profesionales que impresionen a cualquiera, para abrirte paso en uno de los sectores con mejores oportunidades laborales.
¿Qué esperas para transformar tu futuro?
