Transform es una propiedad que nos permite transformar el objeto resiven funciones.

Traslate

Dentro de la primera propiedad tenemos traslate donde la podemos modificar en el eje X y eje Y hasta donde queramos.

Aqui no lo modificamos

Con esta propiedad lo movemos a la derecha 50px en el eje x

Con esta propiedad lo movemos a la izquierda 50px en el eje x

Con esta propiedad lo movemos a abajo 50px en el eje Y

Con esta propiedad lo movemos a arriba 50px en el eje Y

Scale

Con esta propiedad modificamos el anchor y la altura del objeto.

Con esta propiedad modificamos el tamaño del eje X

Con esta propiedad modificamos el tamaño del eje Y

Para ver los cambios en con transition utilisamos transition transform en hover eje X.

transition aplicado al transform en hover

Para ver los cambios en con transition utilisamos transition transform en hover eje Y.

transition aplicado al transform en hover

Skew

Es un elemento del hover utilizado para deformar la caja .

Como podemos ver el texto se deforma al movimiento por lo que vamos a hacer un objeto vectorizada. Un objeto vectorizado a medida que se engranda el objeto aumentan los pixeles para que no pierda calidad .

---------------------------------------------------------------------------------------------------------------------------

Aqui aplicamos el skew al texto para enderezarlo y a la caja para cambiarla de forma

Clic path generator

Con clic path podemos generar formas para nuestros objetos .

pagina oficial .

Triangulo
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Circulo
clip-path: circle(50% at 50% 50%);

mensaje
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

flecha derecha
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

cruz
clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);

rombo
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);