Transform

Contactar con el profesor

transform:translateX

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

transform:translateY

Repetir el ejercicio anterior, pero que el rectángulo se mueva ahora en el eje Y.

transform: translateY

Es posible mover la capa en los ejes X e Y simultáneamente utilizando:

transform:translate(100px, 200px);

transform:rotate

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);

transform:skewX

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

transform:skewX(-25deg);

transform:scale

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

perspective

<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>
← Columns
Animaciones con Transition →

Aviso Legal | Política de privacidad