Transformaciones CSS 2D

Tabla de contenido

Transformaciones CSS 2D

Las transformaciones CSS le permiten mover, rotar, escalar y sesgar elementos.

Pase el cursor sobre el elemento siguiente para ver una transformación 2D:

2D rotate

En este capítulo aprenderá sobre la siguiente propiedad CSS:

transform

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que admite totalmente la propiedad.

Property
transform	36.0	10.0	16.0	9.0	23.0

Métodos de transformación CSS 2D

Con la propiedad CSS transform puedes utilizar los siguientes métodos de transformación 2D:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Consejo: Aprenderá sobre las transformaciones 3D en el siguiente capítulo.

El método `translate()`

El método translate() mueve un elemento desde su posición actual (según a los parámetros indicados para el eje X y el eje Y).

El siguiente ejemplo mueve el elemento <div> 50 píxeles hacia la derecha, y 100 píxeles hacia abajo desde su posición actual:

Ejemplo

div
{
   
transform: translate(50px, 100px);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

El método `rotate()`

El método rotate() gira un elemento en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj según un grado determinado.

El siguiente ejemplo gira el elemento <div> en el sentido de las agujas del reloj 20 grados:

Ejemplo

div
{
  transform: rotate(20deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

El uso de valores negativos rotará el elemento en el sentido contrario a las agujas del reloj.

El siguiente ejemplo gira el elemento <div> en sentido antihorario 20 grados:

Ejemplo

div
{
   
transform: rotate(-20deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

El método `scale()`

El método scale() aumenta o disminuye el tamaño de un elemento (según los parámetros dados para el ancho y el alto).

El siguiente ejemplo aumenta el elemento <div> para que sea dos veces su ancho original y tres veces su alto original:

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

El siguiente ejemplo reduce el elemento <div> a la mitad de su ancho y alto originales:

Ejemplo

div
{
   
transform: scale(0.5, 0.5);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

El método `scaleX()`

El método scaleX() aumenta o disminuye el ancho de un elemento.

El siguiente ejemplo aumenta el elemento <div> al doble de su ancho original:

Ejemplo

div
{
   
transform: scaleX(2);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

El siguiente ejemplo reduce el elemento <div> a la mitad de su ancho original:

Ejemplo

div
{
   
transform: scaleX(0.5);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

El método `scaleY()`

El método scaleY() aumenta o disminuye el altura de un elemento.

El siguiente ejemplo aumenta el elemento <div> para que sea tres veces su original altura:

Ejemplo

div
{
   
transform: scaleY(3);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

El siguiente ejemplo reduce el elemento <div> a la mitad de su original altura:

Ejemplo

div
{
   
transform: scaleY(0.5);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

El método `skewX()`

El método skewX() sesga un elemento a lo largo del eje X en el ángulo dado.

El siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del Eje X:

Ejemplo

div
{
   
transform: skewX(20deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

El método `skewY()`

El método skewY() sesga un elemento a lo largo del eje Y según el ángulo dado.

El siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del eje Y:

Ejemplo

div
{
   
transform: skewY(20deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

El método `skew()`

El método skew() sesga un elemento a lo largo de los ejes X e Y según los ángulos dados.

El siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y:

Ejemplo

div
{
   
transform: skew(20deg, 10deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Si no se especifica el segundo parámetro, tiene un valor cero. Entonces, el siguiente ejemplo inclina el elemento <div> 20 grados a lo largo del eje X:

Ejemplo

div
{
   
transform: skew(20deg);
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

El método `matriz()`

El método matrix() combina todos los métodos de transformación 2D en uno.

El método Matrix() toma seis parámetros, que contienen funciones matemáticas, que le permite rotar, escalar, mover (traducir) y sesgar elementos.

Los parámetros son los siguientes: matriz(scaleX(), skewY(), skewX(), scaleY(), traducirX(), traducirY())

Ejemplo

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

Propiedades de transformación CSS

La siguiente tabla enumera todas las propiedades de transformación 2D:

transform: Aplica una transformación 2D o 3D a un elemento.
transform-origin: Le permite cambiar la posición de los elementos transformados.

Métodos de transformación CSS 2D

matrix(n,n,n,n,n,n): Define una transformación 2D, utilizando una matriz de seis valores.
translate(x,y): Define una traslación 2D, moviendo el elemento a lo largo de los ejes X e Y.
translateX(n): Define una traslación 2D, moviendo el elemento a lo largo del eje X.
translateY(n): Define una traslación 2D, moviendo el elemento a lo largo del eje Y.
scale(x,y): Define una transformación a escala 2D, cambiando el ancho y alto de los elementos.
scaleX(n): Define una transformación de escala 2D, cambiando el ancho del elemento.
scaleY(n): Define una transformación de escala 2D, cambiando la altura del elemento.
rotate(angle): Define una rotación 2D, el ángulo se especifica en el parámetro
skew(x-angle,y-angle): Define una transformación de inclinación 2D a lo largo de los ejes X e Y.
skewX(angle): Define una transformación de inclinación 2D a lo largo del eje X.
skewY(angle): Define una transformación de inclinación 2D a lo largo del eje Y.

Transformaciones CSS 2D

Tabla de contenido