Práctica 7

El método translate() mueve un elemento desde su posición actual hasta la posición dada en función de las coordenadas X e Y pasadas como parámetros
Ejemplo: transform: translate(10px,20px);

El método rotate() gira un elemento hacia la derecha o a la izquierda según un determinado grado que se la pasa como parámetro
Ejemplo1: transform: rotate(30deg);
Ejemplo2: transform: rotate(-30deg);
Si se le da un ángulo negativo se gira en sentido contrario.

El método scale() aumenta o disminuye el tamaño de un elemento en función de los parámetros de anchura y altura pasados.
Ejemplo1: transform: scale(1.5,2);
Ejemplo2: transform: scale(0.7,0.8);
Si se le dan valores mayores a uno aumenta el tamaño, siendo al contrario si los valores son menores de 1.

El método skew() tuerce un elemento a lo largo de los ejes X o Y en función de los grados pasados como parámetro.
Ejemplo1: transform: skewX(20deg);
Ejemplo2: transform: skewY(20deg);

Primer y cuarto parámetro modifican la escala (scale). Segundo y tercer parámetro modifican el sesgado (skew). Los parámetros quinto y sexto modifican la posición (translate)
Ejemplo1: transform: matrix(1,-0.3,0,1,0,0);
Ejemplo2: transform: matrix(1,0,0.5,1,50,0);

Movemos un elemento en las tres dimensiones con translate3d(x,y,z). No notamos la diferecia al mover el eje Z pero se translada (profundidad)
Ejemplo: transform-style: preserve-3d;
transform: translate3d(0px, 0px, -20px);

Rotamos todos los ejes 360 grados con rotate3d(x,y,z,grados); Usaremos en x, y, z, 0 o 1 para saber que eje queremos girar y los grados que se van a girar.
Ejemplo:
#rotate3d .rectangulo{
   transition: 4s;
}
#rotate3d .rectangulo:hover{
   transform: rotate3d(1,1,1,360deg);
}

Aumenta el tamaño por cada eje. En este caso tampoco vemos la diferencia al no ver el eje Z.
Ejemplo: transform: scale3d(1,1,40);

Cambia la perspectiva del elemento. Para ello usamos una animación para poder apreciarlo.
Ejemplo:
@keyframes mymove {
   50% {perspective: 100px;}
}
.div2 {
   transform: rotateX(45deg);
}