Las transformaciones CSS te permiten mover, rotar, escalar y sesgar elementos. En este capítulo estudiaremos acerca de la siguiente propiedad:
- transform
Métodos de transformación CSS 2D
Con la propiedad transform podemos usar los siguientes métodos:
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
El método translate()
El método translate() mueve un elemento desde su posición actual (según los parámetros proporcionados para el eje X y el eje Y). El siguiente ejemplo mueve el elemento <div> 50 píxeles a la derecha y 100 píxeles hacia abajo desde su posición actual.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>El método translate()</h1>
<div>
El elemento div será movido 50px hacia la derecha y 100 hacia abajo de su
posición actual
</div>
</body>
</html>
El método rotate()
El método rotate() gira un elemento en sentido horario o antihorario según un grado determinado. El siguiente ejemplo gira el elemento <div> en el sentido de las agujas del reloj 20 grados.
Ejm
<!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 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 alto). El siguiente ejemplo aumenta el elemento <div> para que sea dos veces su ancho original y tres veces su altura original.
Ejm
<!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>El método scale()</h1>
<p>El método scale() incrementa o decrementa el tamaño de un elemento.</p>
<div>
Este elemento div es dos veces su ancho original y tres veces su altura
original.
</div>
</body>
</html>
scaleX()
El método scaleX() incrementa o decrementa el ancho de un elemento.
Ejm
div {
transform: scaleX(2);
}scaleY()
El método scaleY() incrementa o decrementa el alto de un elemento.
Ejm
div {
transform: scaleY(3);
}
El siguiente ejemplo reduce el elemento <div> a la mitad de su altura original:
Ejm
div {
transform: scaleY(0.5);
}skewX()
El método skewX() sesga un elemento a lo largo del eje X en el ángulo dado. El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X.
Ejm
div {
transform: skewX(20deg);
}skewY()
El método skewY() sesga un elemento a lo largo del eje Y en el ángulo dado. El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje Y.
Ejm
div {
transform: skewY(20deg);
}skew()
El método skew() sesga un elemento a lo largo de los ejes X e Y en los ángulos dados. El siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X y 10 grados a lo largo del eje Y.
Ejm
div {
transform: skew(20deg, 10deg);
}Si no se especifica el segundo parámetro, tiene valor cero. Entonces, el siguiente ejemplo sesga el elemento <div> 20 grados a lo largo del eje X.
Ejm
div {
transform: skew(20deg);
}matrix()
El método matrix() combina todos los métodos de transformación 2D en uno. Toma seis parámetros, que contienen funciones matemáticas, que le permiten rotar, escalar, mover (traducir) y sesgar elementos.
Los parámetros son los siguientes: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).
Ejm
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}