Métodos de transformación 2D en CSS

Al diseñar un sitio web, a menudo se requiere posicionar, girar, escalar o sesgar elementos HTML horizontal y verticalmente para mejorar el cambio de punto del sitio web. Para este propósito, podemos usar la propiedad de transformación CSS que nos permite alterar la posición, el tamaño o la forma de un elemento. En CSS, hay dos tipos de transformaciones que son la transformación 2D y la transformación 3D.

En esta guía, sin embargo, vamos a atender la transformación 2D y aprender sobre los diversos métodos de transformación 2D.

Métodos de transformación 2D en CSS

Hay varios métodos de transformación 2D en CSS que son los siguientes.

1. Método traducir ()
2. Método de rotación ()
3. Método de escala ()
4. método scalex ()
5. método scaley ()
6. método skew ()
7. Método SKEWX ()
8. método skewy ()
9. Método Matrix ()

Estos se explican en detalle a continuación.

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)

O,

Transformar: traducir (TX)

El TX, y Ty se refieren a los ejes X e Y.

Ejemplo
Supongamos que desea mover una imagen a una determinada posición utilizando el método Traduce () y luego siga el ejemplo a continuación.

Html

CSS

img
Ancho: 250px;
Altura: 100px;
transformar: traducir (50px, 50px);

Producción
Sin traducir () método.

Con el método traduce ().

El método traduce () ha traducido la imagen 50px desde la parte superior y 5-px desde el lado izquierdo con éxito.

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 (grados)

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

Ejemplo
Considere el siguiente ejemplo para comprender el funcionamiento del método Rotate ().

Html

Este es un contenedor Div Normal.


Este contenedor div gira 25 grados en el sentido.


Este contenedor div gira 25 grados en sentido antihorario.

Aquí hemos especificado tres contenedores DIV para demostrar el concepto del método rotado ().

CSS

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

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

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

En el código anterior, primero estamos dando un ancho, altura, color de fondo y borde a los contenedores Div. Posteriormente, estamos rotando el segundo div 25 grados en el sentido de las agujas del reloj y el tercer Div 25 grados anti-nalle. Tenga en cuenta que para rotar en sentido antihorario estamos utilizando valores negativos.

Producción

El método rotar () se ha implementado y verificado.

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)

O,

Transformar: Escala (SX)

El SX y SY representan las dimensiones horizontales y verticales respectivamente.

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

Html

El tamaño del recipiente Div se incrementa dos veces de su ancho original y la altura.

En el código anterior, simplemente hemos creado un elemento div.

CSS

div
Ancho: 200px;
Altura: 100px;
margen: 130px;
Color de fondo: Bisque;
borde: 1px negro sólido;
transformación: escala (2,2);

Usando las propiedades de CSS, estamos asignando algún ancho, altura y margen al elemento Div y, por último, estamos utilizando el método de escala () para aumentar el ancho y la altura del elemento dos veces su ancho y altura originales.

Producción

El tamaño del contenedor Div se incrementó usando el método de escala ().

método scalex ()

Con el fin de alterar el ancho de un elemento, se utiliza el método scalex ().

Sintaxis

Transformar: Scalex (SX)

El parámetro SX representa la dimensión horizontal de un elemento.

Ejemplo
Supongamos que desea disminuir el ancho de un elemento y luego consulte el ejemplo a continuación.

CSS

div
Transformar: Scalex (0.5);

En el código anterior, estamos utilizando el método scalex () para disminuir el ancho de un contenedor Div.

Producción

El método escala () funciona correctamente.

método scaley ()

Con el fin de alterar la altura de un elemento, se utiliza el método scaley ().

Sintaxis

Transform: Scaley (SY)

El parámetro SY define el valor del eje y.

Ejemplo

Considere el ejemplo a continuación.

CSS

div
transformar: escala (2);

Aquí estamos utilizando el método scaley () para aumentar la altura del elemento Div.

Producción

La altura del elemento Div se ha incrementado dos veces su altura original.

método skew ()

Este método sesga un elemento horizontal y verticalmente basado en los grados especificados.

Sintaxis

Transformar: sesgo (SX, SY)

O,

Transformar: sesgo (SX)

El SX, y SY representan los ejes X e Y.

Ejemplo
Supongamos que desea sesgar un elemento a lo largo de los ejes X e Y ..

Html

Este es un contenedor Div Normal.


Este contenedor Div está sesgado a 10 grados horizontalmente y 15 grados verticalmente.

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

CSS

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

.sesgado
transformar: sesgo (10deg, 15deg);

Además de diseñar los contenedores Div, estamos sesgando el segundo recipiente Div 10 grados a lo largo del eje X y 15 grados a lo largo del eje Y.

Producción

El contenedor div ha sido sesgado horizontal y verticalmente.

Método SKEWX ()

Para sesgar un elemento particular horizontalmente basado en los grados especificados, se utiliza el método skewx ().

Sintaxis

Transformar: sesgo (SX)

El parámetro SX define el eje x.

Ejemplo
Supongamos que desea sesgar un elemento 15 grados horizontalmente.

CSS

.sesgado
transformar: skewx (15deg);

Usando el método skewx () estamos sesgando el elemento div 15 grados horizontalmente.

Producción

El método escala () funciona correctamente.

método skewy ()

Para sesgar un elemento particular verticalmente basado en los grados especificados, se utiliza el método skewy ().

Sintaxis

Transformar: sesgo (sy)

El parámetro SY define el eje y.

Ejemplo
Supongamos que quieres sesgar un elemento 15 grados verticalmente.

CSS

.sesgado
transformar: skewy (15deg);

Usando el método skewx () estamos sesgando el elemento div 15 grados verticalmente.

Producción

El método scaley () funciona correctamente.

Método Matrix ()

Con el fin de traducir, girar, escalar y sesgar elementos de una vez, se utiliza el método matriz ().

Sintaxis

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

Puede asignar valores a todas las propiedades que las separan.

Ejemplo

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

Html

Este es un contenedor Div Normal.


El contenedor Div después de usar el método matrix ().


El contenedor Div después de usar el método matrix ().

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

CSS

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

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

.matriz2
Transformar: matriz (1, 0, 0.5, 1, 150, 0);

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

Producción

El método de matriz funciona correctamente.

Conclusión

Con el propósito de posicionar, girar, escalar o sesgar elementos a lo largo del eje x e y, hay varios métodos de transformación 2D disponibles en CSS. Los métodos de transformación 2D básicos en CSS son traducir (), rotado (), escala (), sketw () y matrix (). Cada uno de estos métodos tiene un propósito diferente que hemos explicado en este artículo junto con un ejemplo relevante.