RotateX y RotateY
Redactado por
Sebastian V. Fecha de publicación
15/07/2024
Tiempo de lectura
8 min
Tema
CSS Transform
La tarjeta que se voltea: un clásico moderno
Si alguna vez has jugado con las tarjetas de presentación de los contactos en una aplicación premium, o has visto un panel de estadísticas donde una tarjeta se voltea para mostrar más información, estás ante el efecto más reconocible del 3D en CSS: el card flip.
Y detrás de ese efecto sofisticado solo hay dos funciones de transform: rotateX() y rotateY().
Girando sobre los ejes
En la lección anterior aprendiste sobre el espacio 3D. Ahora imagina que tienes una hoja de papel en tus manos:
- rotateX(): Es como doblar la hoja por la línea horizontal del centro. La parte de arriba se aleja de ti, la de abajo viene hacia ti (o al revés). Es el eje horizontal.
Un valor positivo (ej.
rotateX(45deg)) inclina la parte superior hacia atrás. - rotateY(): Es como doblar la hoja por la línea vertical del centro. El lado derecho se aleja de ti, el izquierdo viene hacia ti. Es el eje vertical.
Un valor de
rotateY(180deg)voltea completamente el elemento, mostrando su reverso.
La anatomía de una tarjeta flip
El efecto flip usa cuatro ingredientes esenciales:
- Un contenedor escenario con
perspective. - Un contenedor interno con
transform-style: preserve-3dytransition: transform. - Dos hijos en
position: absoluteconbackface-visibility: hidden. - La cara trasera empieza ya rotada 180deg para estar de espaldas desde el inicio.
Al hacer hover, solo rotamos el contenedor interno 180deg. Las dos caras viajan juntas y la magia de backface-visibility: hidden hace que solo sea visible la que mira hacia ti.
rotateX para efectos de entrada
Más allá del flip, rotateX() se usa frecuentemente para animaciones de entrada donde los elementos caen desde el cielo: parten de rotateX(-90deg) y opacity: 0 (apuntando hacia el cielo) y se animan hacia rotateX(0deg) y opacity: 1 (mirando directamente al usuario). Con una perspectiva bien calibrada, el efecto es espectacular.
Consejo profesional
Para el efecto flip, SIEMPRE aplica backface-visibility: hidden a AMBAS caras (frontal y trasera). Si no lo haces en la cara frontal, cuando la tarjeta se voltee completamente, verás el reverso correcto pero también el frente aparecerá de fondo como una sombra, arruinando el efecto.
Tarjeta Flip Interactiva
<div class="escena-tarjeta">
<div class="tarjeta-flip">
<div class="cara-frontal">
<h4>Genesis Pixel - Pasa el ratón para ver el reverso</h4>
</div>
<div class="cara-trasera">
<h4>¡Hola! - Así funcionan las tarjetas flip</h4>
</div>
</div>
</div>Genesis Pixel - Pasa el ratón ↗
¡Hola! - Soy el reverso ✨
Pasa el ratón sobre la tarjeta para verla voltear en 3D. Dos caras, backface-visibility: hidden y rotateY(180deg) en la trasera son los tres secretos del efecto.
Errores comunes
Tu tarjeta de visita digital
Crea una tarjeta de presentación personal que muestre tu nombre al frente. Al voltearla, muestra tu stack tecnológico o un mensaje de contacto.