Como usar el estilo transform de CSS

div{	
	background-color: pink;  
	width:300px; 	
	height:300px;
	transition:transform 2s;
}
div:hover{
	/*transform: function()*/
	transform:translateX(100px);
}

transform:translate(100px, 200px);

Repetir el ejercicio anterior, pero rotando el rectángulo.

transform:rotate(720deg);

Para concatenar efectos utilizo el espacio en blanco.
Ejemplo:

transform:translate(100px, 200px) rotate(400deg);

Repetir el ejercicio anterior, pero sesgando en el eje X el rectángulo.

transform:skewX(-25deg);

transform:scale(5);
transform:scale(0.5, 4);

<style>
	#div1 {
		position: relative;
		height: 150px;
		width: 150px;
		border: 1px solid black;
		perspective: 150px;
	}
	#div2 {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: red;
		transition:1s;
	}
	#div2:hover{
	transform: rotateX(45deg);
	}
</style>


<div id="div1">
<div id="div2"></div>
</div>