CSS Transform Translate | Explicado

Mientras desarrollan cualquier aplicación, los desarrolladores deben mantener el diseño del sitio web atractivo e interactivo. Para hacerlo, se pueden utilizar varias propiedades CSS, como la transición, la animación y muchas más. Más específicamente, el "transformarLa propiedad posiciona el elemento en el eje x, el eje y y el eje z.

Esta redacción explicará la propiedad de transformación CSS con la función Value Translate ().

Escenario de ejemplo

Para la demostración, crearemos dos imágenes apiladas entre sí. El primero será estático y ligeramente opaco, mientras que el otro será móvil. Además, el "transformarLa propiedad se aplica al segundo elemento para que se mueva en relación con la imagen opaca.

Paso 1: Agregar imágenes en HTML

En HTML, primero, cree un elemento Div con el nombre de la clase "contenido principal". Dentro de este elemento Div, agregue otro DIV con el nombre de la clase "movimiento-img". Dentro de este elemento div, agregue dos elementos, cada uno con atributos:

• "SRC"El atributo especifica la ruta de imagen.
• "clase"El valor del atributo se agrega para acceder al elemento relevante en CSS.
• "alternativo"Especifica el texto que se mostrará si la imagen no se carga.
• "anchoLa propiedad define el ancho del elemento HTML agregado.

Aquí está el código HTML:

Paso 2: Aplicación de CSS

Avencemos para aplicar propiedades de estilo CSS a los elementos HTML.

Elemento de estilo "cuerpo"

cuerpo
Color de fondo: #B4CDE6;

El "color de fondoLa propiedad se aplica para establecer el color de fondo del elemento del cuerpo.

Estilo "Move-IMG" Div

.Move-IMG
Posición: relativo;
Ancho: 300px;
margen: auto;
margen-top: 40px;

El "movimiento-imgEl elemento div se aplica con las siguientes propiedades CSS:

• "posición"Propiedad con el valor"relativo"Establece la posición del elemento en relación con su posición normal.
• "ancho"La propiedad establece el ancho del elemento.
• "margenLa propiedad se utiliza para establecer la altura del elemento.
• "margen-top"La propiedad especifica el espacio en la parte superior del contenido del elemento.

Estilo "IMG-1" Div

.IMG-1
Posición: Absoluto;
Opacidad: 0.12;

El "IMG-1"Div tiene el estilo de la siguiente manera:

• "posición"Propiedad con el valor"absoluto"Cosicionará el elemento en relación con su elemento principal posicionado más cercano.
• "opacidad"Especifica la transparencia del elemento.

Estilo "IMG-2" Div

.IMG-2
Posición: Absoluto;

De la misma manera, hemos colocado el "IMG-2"Div.

Producción

Cómo transformar la posición del objeto en HTML?

El "transformar"La propiedad nos permite rotar, sesgar, escalar o traducir un elemento. Más especialmente, el "traducir()"La función ajusta la posición del elemento en el eje x, y y z. La funcionalidad del "traducir"La propiedad es la misma que la de la función traduce () utilizada con la propiedad de transformación.

¿Cuáles son los diferentes valores de propiedad de "transformar"??

Hay varios valores de traducción asociados con la propiedad de transformación CSS:

• traducir()
• traduceX ()
• traduce ()
• traducez ()
• traduce3d ()

Consulte el ejemplo proporcionado para comprender su uso!

Ejemplo 1: Uso de la propiedad "traducir ()" con "transformar"

El "traducir()"La función toma dos valores de parámetros. El primero representa el valor del eje x, y el segundo valor representa el eje y:

transformar: traducir (100px, 100px);

Se puede observar que de acuerdo con los valores especificados, el elemento se reposiciona horizontal y verticalmente:

Ejemplo 2: Uso de la propiedad "traduceX ()" con "transformar"

Para mover el objeto horizontalmente, utilice el "traduceX ()" función. Como resultado, el valor positivo moverá el objeto al lado derecho, y el valor negativo moverá el objeto al lado izquierdo:

Transform: traduceX (100px);

Se puede observar que el objeto se ha movido 100px a la derecha:

Ejemplo 3: Uso de la propiedad "traducey ()" con "transformar"

Para mover el objeto verticalmente, use el "traduce ()" función. Según sus parámetros, el valor positivo moverá el objeto hacia la parte inferior, y el valor negativo lo moverá hacia la parte superior:

Transform: traducir (90px);

Producción

Ejemplo 4: Uso de la propiedad "TradatateZ ()" con "Transformar"

El traduceX () y la traducey () son bastante simples de entender a medida que transforman los elementos en términos del eje x y el eje y, respectivamente. El "traducez ()La función es de alguna manera complicada. El eje x y el eje y mueven el elemento horizontal o verticalmente, mientras que el eje z mueve el objeto más cerca o lejos de usted.

Pasando el valor positivo como el parámetro de función traducez ()

Puede utilizar la función traduceZ () de la siguiente manera:

Transform: Perspective (200px) traducez (50px);

Aquí:

• "perspectiva()": Esta función define un espacio virtual entre la pantalla y el elemento HTML.
• "traducez ()": Este valor positivo en esta función mueve el elemento más cerca de usted, mientras que el valor negativo aleja el elemento de usted.

Se puede observar que ahora la imagen se acerca a la pantalla y se ve más grande:

Pasando el valor negativo como parámetro de función traducez ()

Ahora, especifiquemos el valor negativo como el parámetro de la función TradatateZ ():

Transform: Perspective (200px) traducez (-50px);

El valor negativo movió el elemento lejos de nosotros:

Objetivo de movimiento en la dirección 3-D

Para mover el objeto en una dirección 3-D, utilice el "traduce3d ()" función. Toma el valor como el eje x, el eje y y los parámetros del eje z. Además, el "perspectiva()"El valor especifica el espacio entre el elemento y la pantalla para que la imagen pueda moverse en un plano 3-D:

transformación: perspectiva (500px) traduce3D (150px, 30px, 130px);

La salida representa el movimiento del objeto en 3-D:

Eso se trataba de propiedad de transformación CSS con la función Tradate () en CSS.

Conclusión

CSS "transformar"Propiedad con el valor"traducir()"Posicionó los elementos en el eje x, el eje y y el eje z. Estos valores pueden ser positivos o negativos. El "traduceX ()" y "traduce ()"Las funciones colocaron los objetos horizontal y verticalmente. El "traducez ()La función "mueve el objeto más cerca o lejos de la pantalla. Se combina con el "perspectiva()"Función, que especifica un espacio entre la pantalla y el elemento. Este artículo ha demostrado la propiedad de transformación CSS con la función traduce ().