Curso de HTML | Como usar el estilo transform de CSS 1

Curso de HTML
Como usar el estilo transform de CSS

Curso de HTML | Como usar el estilo transform de CSS 2

Curso de HTML | Como usar el estilo transform de CSS

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.  
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