Transformación 2D usando CSS

CSS | Transformación 2D : Aquí, vamos a aprender sobre la 2D (bidimensional) Transformación usando CSS (Cascading Style Sheet).

CSS | Transformación 2D

transformación 2D en CSS le permite movimiento , rote , escala , y elementos oblicuos forma, tamaño y posición a lo largo del eje x y del eje y.

En CSS, 2D transformar la propiedad le permite utilizar los siguientes métodos de transformación 2D,

  1. rotate ()
  2. translate ()
  3. escala ()
  4. de inclinación ()
  5. matriz ()

Echemos un vistazo a cada uno de los métodos por uno.

1) rotate ()

rotate (a) Propiedad define una transformación que mueve el elemento alrededor de un punto fijo en el eje x, ya sea en sentido horario o en sentido antihorario.

Sintaxis:

Element{ 
transform:rotate(30deg);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div>
this is div
</div>
<div id="myDiv">
this div element is rotated clockwise 45 degrees.
</div>
</body>
</html>

salida

2D Transformation using CSS - 4

En el ejemplo anterior, la & lt; div & gt; elemento es en sentido horario girada 45 grados.

2) traducir ()

translate () de propiedad mueve la posición del elemento desde la posición actual en el eje X y el eje Y.

  • translateX () – mueve la posición del elemento en el eje X.
  • translateY () – mueve la posición del elemento en el eje Y.

Sintaxis:

Element{ 
transform:translate(30px,10px);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
transform: translate(60px, 80px);
}
</style>
</head>
<body>
<h1>2D transformation</h1>
<div>
This is a div element.
</div>
</body>
</html>

salida

2D Transformation using CSS - 5

En el ejemplo anterior, & lt; div & gt; elemento 60 píxeles a la derecha, y 80 píxeles hacia abajo desde su posición actual.

3) escala ()

escala () de propiedad Modifica el tamaño del elemento en el X y el eje Y.

scaleX () – Modifica el tamaño del elemento en el eje X. scaleY () – Modifica el tamaño del elemento en el eje Y.

Sintaxis:

Element{ 
transform:scale(2,3);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
transform: scale(2, 3);
}
</style>
</head>
<body>
<h1>2D transformation</h1>
<div>
This is div element.
</div>
</body>
</html>

salida

2D Transformation using CSS - 6

En el ejemplo anterior, el elemento & lt; div & gt; aumenta hasta 3 veces de su altura original, y 2 veces de su anchura original.

4) de inclinación ()

Shear mapeo o sesga cada punto de un elemento por un cierto ángulo a lo largo del eje X o eje Y.

  • skewX () – horizontalmente sesgando cada punto de un elemento en un cierto ángulo en la dirección horizontal.
  • skewY () – verticalmente sesgando cada punto de un elemento en un cierto ángulo en la dirección vertical.

Sintaxis:

Element{ 
transform:skew(3,4);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
transform: scale(1, 2);
}
</style>
</head>
<body>
<h1>2D transformation</h1>
<div>
This is div element.
</div>
</body>
</html>

salida

2D Transformation using CSS - 7

En el ejemplo anterior, sesga la & lt; div & gt; 1px elemento a lo largo del eje X, y 2px lo largo del eje Y.

5) matriz ()

matriz (a) Propiedad define una transformación 2D en forma de una matriz de transformación. El matriz método () toma seis parámetros que le permiten rotar, escalar, traducir, y los elementos oblicuos en orden respectivo.

Sintaxis:

Element{ 
transform:matrix(1, -0.3, 0, 1, 0, 0);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<h1>2D transformation</h1>
<div>
This a div element..
</div>
</body>
</html>

salida

2D Transformation using CSS - 8

En el ejemplo anterior, la matriz () propiedad se utiliza.


Deja un comentario

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