Cómo llevar a cabo la transformación 3D usando CSS?

CSS rotateX (), rotateY (), y rotateZ () | A continuación, vamos a aprender cómo realizar transformación 3D usando CSS (Cascading Style Sheet)?

Introducción:

Tiene esto alguna vez ocurrido que al tratar con varios elementos en su sitio web o una página web puede utilizar los ejes class su colocación? Por ejes lo que se entiende aquí es el eje X, eje Y, y el eje z, que podrían estar familiarizados con estos de su for geometría básica. Pero el uso de estos ejes class la colocación de sus elementos es una historia totalmente diferente.

A menudo usamos muchas propiedades cuando se trata de la colocación de los elementos en nuestro sitio web o una página web, ejemplo for, utilizamos for propiedad muchas veces, float derecha o float fueron, así, pero el uso de ejes que podemos lograr el mismo . No es que se le requiere ningún conocimiento de la geometría típica de hacer uso de la propiedad ejes, ya que es muy utilizado, la ventaja float de esta propiedad es realizar transformaciones 3D .

Así que vamos a entender esta propiedad de una mejor manera mucho.

Definición:

Ahora que usted está enterado del tema central de este artículo, así que vamos a echar un vistazo a la definición formal.

En CSS uso de transformaciones 3d, podemos mover elementos al eje x, eje y, y eje z.

allí tres 3D métodos de transformación , como se explicó anteriormente y esos son,

  1. rotateX ()
  2. rotateY ()
  3. rotateZ ()

Bastante obvio ¿verdad? Así que sin más preámbulos, vamos a entender estos valores con mayor claridad en las próximas secciones.

1) rotateX () Método

La primera y principal valor es rotateX () valor, este valor como su propio nombre indica es muy útil cuando se trata de la eje X , veamos cómo,

el método rotateX () es útil siempre que desea girar el elemento alrededor de su eje X y en cualquier grado dado.

Sintaxis:

    Element{
transform:rotateX();
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
background-color: #f40;
border: 1px solid #000;
transform: rotateX(180deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<div>
This is rotateX method.
</div>
</body>
</html>

salida

How to perform 3D transformation using CSS? - 4

En el ejemplo anterior, puede parecer un poco extraño ver pero se puede entender fácilmente que el elemento div es girar 180 grados alrededor de su eje X y por lo tanto es posible obtener una imagen invertida.

2) rotateY () Método

El segundo valor main la discusión es la rotateY () valor cuyas características de nuevo se pueden derivar con sólo mirar a su nombre, por lo tanto, es muy útil cuando se trata de la eje Y , echar un vistazo a la definición más abajo.

La funcionalidad de la rotateY () valor es algo similar a la rotateX () , la única diferencia es del eje, aquí la rotateY () valor puede llegar a ser útil cuando se desea girar el elemento en torno a su muy eje y y en cualquier grado dado.

Sintaxis:

    Element{
transform:rotateY();
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
background-color: #f40;
border: 1px solid #fff;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<div>
This is rotateY method.
</div>
</body>
</html>

salida

How to perform 3D transformation using CSS? - 5

En el ejemplo anterior, similar a rotateX () de salida se puede ver que la imagen que podría parecer ser un poco difícil de entender, pero para aliviar su curiosidad lo que se hace aquí es que el elemento div se gira 180 grados alrededor de su eje Y .

3) rotateZ () Método

El tercer valor es rotateZ () valor es muy similar a los valores anteriores pero aquí el eje en el juego sería el eje Z , por lo tanto, la rotateZ ( ) se puede utilizar cuando se desea girar su elemento alrededor de su eje Z y en cualquier grado dado. Por lo tanto, se puede entender fácilmente que las funcionalidades fundamentales de todos los tres elementos son los mismos.

Sintaxis:

    Element{
transform:rotateZ();
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
background-color: #f40;
border: 1px solid #fff;
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<div>
This is rotateZ method.
</div>
</body>
</html>

salida

How to perform 3D transformation using CSS? - 6

En el ejemplo anterior, no debería ser difícil de entender ahora que aquí el elemento div es girar 180 grados alrededor de su eje Z .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *