Métodos de transformación 3D en CSS

Con el fin de asegurarse de que su diseño web sea excepcional y garantice mejorar la experiencia del usuario que necesita para aprender cómo establecer varios elementos HTML en su página web. Hay muchas cosas que puede hacer con elementos para mejorar su aspecto, como los elementos de traducción, rotación o escala en el espacio 2D o 3D.

CSS proporciona varios métodos de transformación que caen en la categoría de método de transformación 2D o métodos de transformación 3D. Sin embargo, en esta publicación veremos los métodos de transformación 3D en CSS.

Métodos de transformación 3D en CSS

Hay varios métodos de transformación 3D en CSS; Algunos de los métodos básicos son los siguientes.

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

Los métodos mencionados anteriormente se explican en detalle a continuación.

Método traducir3D ()

El método CSS Translate3D () cambia la posición de un elemento a lo largo de los ejes X, Y y Z en función de los parámetros asignados.

Sintaxis

Transform: traducir3D (tx, ty, tz)

Los parámetros tx, ty y tz representan los ejes x, y y z.

Ejemplo
Supongamos que desea cambiar la posición de una imagen en la dimensión 3D utilizando el método traduce3d () y luego siga el ejemplo a continuación.

Html

Sin traducción:

Con traducción:

En el código anterior, hemos creado dos elementos DIV y colocamos la misma imagen en ambos contenedores para demostrar el efecto anterior y posterior del método traduce3D ().

CSS

.div
Ancho: 200px;
Altura: 100px;
margen: 30px;

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

Primero estamos proporcionando al contenedor Div algo de ancho, altura y margen. Luego estamos utilizando el método Traduce3D () para cambiar la posición del segundo contenedor DIV.

Producción

La posición de la imagen se ha cambiado con éxito utilizando el método traduce3D ().

método rotar3d ()

Con el propósito de girar un elemento en sentido horario o antihorario en el espacio 3D en función del 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
Para demostrar el funcionamiento del método Rotate3D (), utilizaremos el ejemplo utilizado en la sección I anterior I.mi. Vamos a rotar la imagen del perro a lo largo de los ejes X, Y y Z.

CSS

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

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

Además de establecer el ancho, la altura y el margen del elemento div, también estamos ajustando su perspectiva. La propiedad de la perspectiva define la visión de la perspectiva de un elemento en la dimensión 3D. Por último, estamos rotando el segundo contenedor DIV especificando los valores de los ejes x, y y z y el ángulo.

Producción

La imagen ha sido girada con éxito en la dimensión 3D.

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 ejes X, Y y Z están representados por los parámetros SX, SY y SZ.

Ejemplo
Veamos qué sucede con la imagen del perro cuando use el método scale3D ().

CSS

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

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

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

La imagen del perro ha sido escalada.

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

Los valores de diferentes métodos se pueden asignar a los parámetros correspondientes.

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

CSS

.matriz
Transformar: traducir3D (10px, 10px, 20px) Rotate3d (0, 1, 0, -45deg) escala3D (1, 1, 1);

Nos estamos moviendo, girando y escalando la imagen a la vez.

Producción

El método matrix3d ​​() funciona correctamente.

Se han explicado otros métodos de transformación 3D en la siguiente tabla.

Método	Descripción
método traducex (x)	Altera la posición de un elemento a lo largo del eje X.
método traducido (y)	Altera la posición de un elemento a lo largo del eje Y
método traducez (z)	Altera la posición de un elemento a lo largo del eje z
método Rotatex (x)	Gira un elemento a lo largo del eje X.
método de rotación (y)	Gira un elemento a través del eje Y.
método Rotatez (z)	Gira un elemento a lo largo del eje z.
Método de escala (x)	Escala el elemento a través del eje x.
Método de escala (y)	Escala el elemento a través del eje Y.
Método de escala (z)	Escala un elemento a lo largo del eje z.
Método de perspectiva (n)	Define la vista en perspectiva de un elemento en el espacio 3D.

Conclusión

Para colocar, girar y escalar elementos a lo largo de los ejes X, Y y Z, hay varios métodos de transformación 3D disponibles en CSS. Los métodos básicos de transformación 3D en CSS son Translate3D (), Scale3D (), Rotate3D () y Matrix3d ​​(). El método traduce3D () se usa para cambiar la posición de un elemento, el método Rotate3D () se usa para rotar un elemento en la dimensión 3D, el método scale3D () se usa para alterar el tamaño de un elemento y matrix3d ​​() El método se utiliza para realizar todas estas tareas a la vez. Todos estos métodos se explican en profundidad junto con ejemplos relevantes en esta guía.