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