CSS. Efectos dinámicos Transform: rotate, scale, skew, translate. CU01062D

[paramonso]

Hola. Entrega de CSS desde cero Ejercicio CU01062D del curso práctico de desarrollos web con CSS.


#skew {   transform:skew(-35deg); }
 Al ser un valor positivo inclina (estira) la caja hacia top-left y bottom rigth
 Si fuera un valor negativo inclinaría (estiraría) la caja hacia top-rigth y bottom-left

#scale {  transform:scale(1,0.5); }
El primer valor del paréntesis es el ancho la figura, el segundo valor el alto
Con este valor la figura se queda igual de ancha y se hace un poco mas baja
Con valores negativos tiene el mismo efecto pero gira la caja 180 grados

#rotate {   transform:rotate(45deg); }
Gira la caja 45 grados en el sentido de las agujas del reloj

#translate {   transform:translate(10px, 20px); }
El primer valor mueve la caja hacia la derecha la cantidad de pixels indicados
El segundo valor mueve la caja hacia bajo los pixels indicados    
                        
#rotate-skew-scale-translate {transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }

skew(30deg) inclina (estira) la caja 30 grados top-rigth left-bottom
scale(1.1,1.1) transforma la caja a una escala superior de la que tiene
rotate(40deg) gira la caja 40 grados en el sentido de las agujas del reloj
translate(10px, 20px) mueve la caja 10px hacia la derecha y 20px hacia abajo

[pedro,,]

Hola paramonso

Las respuestas son correctas aunque algo escuetas si nos ceñimos a lo que pide el apartado "b" del ejercicio, donde habría que explicar a quién afectarían estos efectos.

Por otra parte, faltaría el código del apartado "a"

Saludos.