Maquetación Web Dinámica / Transformaciones y transiciones
transform-origin: el punto de pivote
En el corazón del módulo 9 lo descubriste a la fuerza: sin
transform-origin, las dos mitades giraban sobre su centro y quedaba "un
moño roto". Hoy le pones teoría a ese instinto — y con ella, menús que se
despliegan desde su botón, puertas que abren por la bisagra y manecillas
que giran como deben.
Todo giro necesita un eje
Sintaxis: dónde va la chincheta
El valor por defecto es center center (o 50% 50%, es lo mismo). Y
aplica igual a scale: escalar con origin top left "crece hacia abajo y
a la derecha" en vez de inflarse desde el centro — el efecto exacto de los
menús desplegables que emergen desde su botón.
Misma rotación, tres chinchetas
<div class="fila">
<figure><div class="carta centro">centro</div><figcaption>50% 50% (defecto)</figcaption></figure>
<figure><div class="carta esquina">esquina</div><figcaption>bottom left</figcaption></figure>
<figure><div class="carta borde">borde</div><figcaption>top center</figcaption></figure>
</div>
<p class="nota">Hover sobre cada carta: las tres reciben el MISMO rotate(25deg); solo cambia dónde está clavada la chincheta.</p>body { font-family: system-ui; padding: 28px; background: #f8fafc; }
.fila { display: flex; gap: 40px; flex-wrap: wrap; }
figure { margin: 0; text-align: center; }
.carta { width: 84px; height: 110px; display: grid; place-items: center; background: #6d28d9; color: white; font-size: 12px; font-weight: 600; border-radius: 10px; transition: transform 250ms ease-out; }
.centro { transform-origin: 50% 50%; }
.esquina { transform-origin: bottom left; }
.borde { transform-origin: top center; }
.carta:hover { transform: rotate(25deg); }
@media (prefers-reduced-motion: reduce) { .carta { transition: none; } }
figcaption { font-size: 12px; color: #64748b; margin-top: 10px; font-family: monospace; }
.nota { font-size: 13px; color: #64748b; margin-top: 18px; max-width: 52ch; }La carta con origin bottom left es un naipe que abanicas sosteniéndolo
por la esquina; la de top center es un péndulo colgado del techo. Mismo
código de giro, física distinta.
Los origins del mundo real
| Efecto | transform | transform-origin |
|---|---|---|
| Menú que se despliega desde su botón | scaleY(0) → scaleY(1) | top center |
| Puerta / página de libro | rotateY() (lección 5) | left center |
| Manecilla de reloj | rotate() | 50% 100% |
| Abanico de cartas | rotate() por carta | bottom center |
| Zoom hacia una esquina de la foto | scale(1.3) | top left |
Tu tooltip aparece con scale(0) → scale(1), pero 'brota' desde su propio centro flotando en el aire, en vez de emerger desde el botón que está debajo. ¿Qué ajustas?
Mini-reto
Construye un mini reloj: un div circular como esfera y dentro una aguja
(un div angosto y alto) con transform-origin: 50% 100% posicionada con
lo que sabes del módulo 7. Dale tres clases — .hora-3, .hora-6,
.hora-9 — que la roten 90°, 180° y 270°. Luego quítale el origin y mira
la aguja girar sobre su centro: el error que ahora sabes diagnosticar a
primera vista.
Qué sigue
Ya transformas... pero todo cambia de golpe: hover y ¡PUM!, el estado
final. Falta el ingrediente que convierte el salto en movimiento:
transition, la propiedad que interpola entre dos estados — y la regla de
los 150-300ms que separa lo profesional de lo mareador.