Cursos de páginas web

Curso de HTML | Como usar el estilo transform de CSS

Curso de HTML

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  
59.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Ver explicación

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>

Colección de animaciones

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.