Rotación y orden de las transformaciones

¡Llegó el momento de poner en práctica lo aprendido! Al amanecer, un lobo atacó la ciudad donde vive Pendalf.

Con la confusión, nuestro mago no tuvo tiempo de conjurar bolas de fuego. Tendrá que reparar la cerca caída cuanto antes.

Hay que concentrarse, recordar los hechizos conocidos y aprender un par de trucos nuevos.

En este ejercicio necesitaremos la función de rotación rotate. Su sintaxis es transform: rotate(ángulo).

Un ángulo positivo gira el objeto en el sentido de las agujas del reloj y uno negativo, en sentido contrario. El ángulo puede expresarse en grados, deg. Por ejemplo, transform: rotate(180deg) gira el objeto 180° en el sentido de las agujas del reloj y lo deja de cabeza.

Al combinar rotaciones y desplazamientos hay un detalle: el orden de las funciones importa. Si escribimos primero rotate y después una función de desplazamiento, podemos interpretar que el sistema de coordenadas gira junto con el objeto:

Así, después de rotate(90deg), usamos translateY para desplazar el bloque horizontalmente y translateX para moverlo verticalmente. Si intercambiamos el orden de las funciones, cambiará el resultado.