Cómo moverse, rotar, escalar y sesgar elementos en CSS?

Los diseñadores web a menudo desean hacer algunas cosas interesantes con los elementos que aparecen en su sitio web para hacer que su diseño web sea llamativo. La propiedad de transformación CSS le permite moverse, girar, escalar y sesgar elementos a lo largo de los ejes x e y a lo largo de los ejes x, y y z. Esta propiedad consta de ciertos métodos que le permiten realizar estas tareas fácilmente. Estos métodos se clasifican ampliamente en dos grupos que son los siguientes.

1. Métodos de transformación 2D
2. Métodos de transformación 3D

Aprendamos en detalle.

Métodos de transformación 2D

Para mover, rotar, escalar y sesgar elementos a lo largo del eje X, y el eje Y, CSS proporciona varios métodos que entran en la categoría de métodos de transformación 2D. Aquí hemos enumerado algunos métodos básicos de transformación 2D para usted.

1. Método traducir ()
2. Método de rotación ()
3. Método de escala ()
4. método skew ()
5. Método Matrix ()

A continuación hemos explicado estos métodos en detalle.

Método traducir ()

El método CSS Translate () altera la posición de un elemento a lo largo del eje x (horizontalmente) o a lo largo del eje y (verticalmente) en función de los parámetros asignados.

Sintaxis

Transformar: Traducir (TX, Ty)

Los parámetros tx y ty representan los ejes x e y.

Ejemplo
Supongamos que desea mover una imagen a una determinada posición utilizando el método traduce (). Aquí está el código relevante.

Html

Sin traducción:

Con traducción:

Aquí hemos creado dos elementos div y colocados una imagen en ambos.

CSS

.div
Ancho: 50px;
margen: 20px;

.traducir
transformar: traducir (30px, 30px);

Además de dar un ancho y margen a los elementos Div, estamos aplicando el método traducir () en la segunda imagen.

Producción

La imagen se ha movido correctamente utilizando el método traduce ().

Método de rotación ()

Con el fin de girar un elemento en sentido horario o antihorario en función del grado especificado, se utiliza el método rotado ().

Sintaxis

Transformar: Rotar (rx, ry, grados)

El parámetro de los grados define el ángulo desde el cual el elemento debe girarse.

Ejemplo
Supongamos que desea rotar un recipiente Div tanto en sentido horario como antihorario. Utilice el método rotar ().

Html

Contenedor Div Normal.


Rotado 30 grados en sentido horario.

Riñonal
Rotado 30 grados en sentido antihorario.

Para demostrar el funcionamiento del método rotado () se han definido tres contenedores DIV.

CSS

div
Ancho: 250px;
Altura: 100px;
Color de fondo: Rosybrown;
borde: 1px gris sólido;

.agujas del reloj
transformar: girar (30 grados);

.en sentido antihorario
transformar: girar (-30deg);

En el código anterior, estamos girando el segundo div 30 grados en sentido horario y el tercer Div 30 grados anti-nalle. Los valores negativos se usan para rotar un elemento antihorario.

Producción

El método de rotación funciona correctamente.

Método de escala ()

Para mejorar o reducir el tamaño de un elemento basado en el ancho especificado, y la altura se utiliza el método de escala ().

Sintaxis

Transformar: Escala (SX, SY)

Los ejes X e Y están definidos por el parámetro SX y SY.

Ejemplo
El siguiente ejemplo demuestra el funcionamiento del método de escala ().

Html

Tamaño original del contenedor Div
El tamaño del recipiente Div se incrementa una vez y media de su ancho original y altura.

Simplemente hemos creado dos elementos Div.

CSS

div
Ancho: 200px;
Altura: 100px;
margen: 50px;
Color de fondo: Rosybrown;
borde: 1px negro sólido;

.escala
Transformar: escala (1.5,1.5);

Estamos utilizando el método de escala () para aumentar el ancho y la altura del elemento una vez y media su ancho y altura originales.

Producción

El tamaño del contenedor Div se ha escalado utilizando el método de escala ().

método skew ()

El método skew () sesga un elemento horizontalmente (a lo largo del eje x) y verticalmente (a lo largo del eje y) basado en los grados especificados.

Sintaxis

Transformar: sesgo (SX, SY)

O,

Transformar: sesgo (SX)

Las dos dimensiones están representadas por SX y los parámetros SY.

Ejemplo
Supongamos que desea sesgar un elemento tanto horizontal como verticalmente, luego considere el ejemplo a continuación.

Html

Contenedor Div Original.


Este contenedor div está sesgado 8 grados horizontalmente y 9 grados verticalmente.

Aquí hemos definido dos contenedores DIV para demostrar el concepto del método skew ().

CSS

div
Ancho: 200px;
Altura: 100px;
Color de fondo: Rosybrown;
borde: 1px gris sólido;

.sesgado
transformar: sesgo (8deg, 9deg);

Estamos sesgando el segundo contenedor div 8 grados a lo largo del eje X y 9 grados a lo largo del eje Y.

Producción

El elemento fue sesgado con éxito.

Método Matrix ()

Para traducir, rotar, escalar y sesgar elementos de una vez, se utiliza el método matriz ().

Sintaxis

Transform: Matrix (Scalex (), Skewy (), SKEWX (), SCALEY (), traduceX (), traduce ())

Los valores de los métodos respectivos se pueden asignar como parámetros.

Ejemplo
Comprendamos el funcionamiento del método Matrix () utilizando el siguiente ejemplo.

Html

Contenedor Div Original.


Después de usar el primer método matrix ().


Después de usar el segundo método matriz ().

Para demostrar el funcionamiento del método Matrix (), hemos creado tres elementos DIV.

CSS

div
Ancho: 200px;
Altura: 100px;
Color de fondo: Rosbrown;
borde: 1px gris sólido;

.matriz1
Transformación: matriz (1, -0.4, 0, 1, 0, 0);

.matriz2
Transformar: matriz (1, 0, 0.4, 1, 120, 0);

Estamos asignando diferentes valores a varios parámetros del método Matrix ().

Producción

El método Matrix () funciona correctamente.

Ahora que hemos aprendido sobre los métodos de transformación 2D, exploremos los métodos de transformación 3D.

Métodos de transformación 3D

Para mover, rotar y escalar, y sesgar elementos a lo largo del eje X, el eje y y el eje z, CSS proporciona varios métodos que se denominan métodos de transformación 3D. Los métodos de transformación 3D fundamentales son los siguientes

1. Método traducir3D ()
2. método rotar3d ()
3. método scale3d ()
4. método matrix3d ​​()

Hemos explicado estos métodos en detalle a continuación.

Método traducir3D ()

El método que se utiliza para cambiar la posición de un elemento a lo largo de los ejes X, Y y Z basados ​​en los parámetros asignados se conoce como el método traduce3D ().

Sintaxis

Transform: traducir3D (tx, ty, tz)

Las tres dimensiones están representadas por los parámetros TX, Ty y TZ.

Ejemplo
Supongamos que desea cambiar la posición de una imagen a lo largo de los tres ejes. Use el método traduce3d ().

Html

Sin traducción:

Con traducción:

Se ha colocado la misma imagen en ambos contenedores para demostrar el efecto antes y después del método traduce3d ().

CSS

.div
Ancho: 50px;
margen: 20px;

.traducir
transformar: traducir3D (25px, 25px, 40px);

Estamos utilizando el método traduce3d () para cambiar la posición del segundo contenedor Div.

Producción

La imagen ha sido traducida utilizando el método traduce3d ().

método rotar3d ()

Con el propósito de girar un elemento en sentido horario o antihorario a lo largo de los ejes X, Y y Z basados ​​en el grado especificado, se utiliza el método rotado ().

Sintaxis

Transformación: Rotate3D (RX, RY, RZ, GRADOS)

Los parámetros RX, RY y RZ definen las tres dimensiones, mientras que el parámetro de los grados especifica el ángulo desde el cual el elemento debe girarse.

Ejemplo
Supongamos que desea rotar una imagen en el espacio 3D.

CSS

.div
Ancho: 200px;
margen: 30px;
Perspectiva: 300px;

.girar
transformación: rotar3d (0, 1, 0, 45deg);

Estamos girando el segundo contenedor DIV especificando los valores de los ejes x, y y z y el ángulo. Tenga en cuenta que también hemos establecido la propiedad de perspectiva en 300px, que define la vista de perspectiva de un elemento.

Producción

La imagen ha sido girada con éxito.

método scale3d ()

Para mejorar o reducir el tamaño de un elemento basado en el ancho especificado y la altura, se utiliza el método de escala (). Para que este método funcione, úselo junto con otros métodos de transformación como rotación y perspectiva.

Sintaxis

Transformar: Scale3D (SX, SY, SZ)

Los parámetros anteriores especifican las tres dimensiones.

Ejemplo
Veamos qué sucede con la misma imagen utilizada en el ejemplo anterior cuando se usa el método scale3D ().

CSS

.div
Ancho: 300px;
margen: 30px;
Perspectiva: 300px;

.escala
transformación: escala3D (1, 1, 1) Rotate3D (1, 0, 0, 60deg);

Como ya se mencionó, tenemos que usar el método scale3D () con otros métodos para ver su efecto, por lo tanto, en el código anterior, lo estamos utilizando junto con el método Rotate3D ().

Producción

El método scale3D () se verifica y funciona correctamente.

método matrix3d ​​()

Con el fin de traducir, girar y escalar elementos de una vez en el espacio 3D, se utiliza el método matriz (). Este método representa 16 valores en forma de una matriz 4 × 4.

Sintaxis

Transformación: Matrix3d ​​(M, M, M, M, M, M, M, M, M, M, M, M, M, M, M, M)

O,

Transform: matrix3d ​​(traduce3d (), rotate3d (), scale3d ())

Cada parámetro toma el valor del método respectivo.

Ejemplo
Traducir, rotar y escalar la imagen del perro a la vez usando el método matrix3d ​​().

CSS

.matriz
transformación: traducir3D (10px, 10px, 20px) Rotate3D (0, 1, 0, -60deg) escala3D (1, 1, 1);

La imagen se está traduciendo, girando y escala simultáneamente.

Producción

La imagen ha sido movida, rotada y escalada a la vez.

Conclusión

Con el propósito de mover, girar, escalar y sesgar un elemento, hay varios métodos disponibles en CSS que se dividen en las categorías de métodos de transformación 2D y métodos de transformación 3D. Los métodos traducir (), rotate (), escala (), sket () y matrix () se agrupan bajo los métodos de transformación 2D de clasificación, mientras tanto, los métodos traduce3d (), rotate3d (), scale3d () y matrix3d ​​() mentir en el grupo de métodos de transformación 3D. Todos estos métodos se explican en detalle en esta guía junto con ejemplos relevantes.