Teoría
Teoría

Transiciones de escala y transform-origin

Ahora haremos que la transformación sea gradual. Para eso, CSS ofrece la propiedad transition. Más adelante estudiaremos en detalle cómo funciona y cómo se utiliza.

Por ahora basta con saber que transition permite cambiar suavemente el valor de una propiedad. En nuestro ejemplo cambiará transform con la función scale, y la transición entre los dos valores durará medio segundo.

Así veremos con claridad cómo cambia el origen del sistema de coordenadas al modificar transform-origin. Cambiaremos su valor y pulsaremos «Ejecutar»: el botón activa o desactiva la clase active del bloque .picture.

Las metas comprueban los valores de transform-origin. El botón «Ejecutar» permite observar el efecto de cada cambio.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Transiciones de escala y transform-origin</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world homeworld"> <div class="picture-frame"> <div class="picture"></div> </div> <button class="btn-activate">Ejecutar</button> </div> </body> </html>

CSS

.picture { transition: transform 0.5s ease; transform: scale(1); } .picture.active { transform: scale(0.5); }

ObjetivosRealizado

Cambia el valor de transform-origin del bloque .picture a:

top left.
top right.
bottom left.
50% 100%.

Después de cada cambio, pulsa «Ejecutar».