1.1 Propiedad transform
Transformaciones CSS permiten cambiar la posición, tamaño, rotación y sesgo de los elementos sin alterar su flujo normal en el documento. Es una herramienta poderosa para crear interfaces web interactivas y dinámicas. Vamos a ver las bases de las transformaciones usando las propiedades transform, translate, rotate, scale y skew.
La propiedad transform permite aplicar transformaciones bidimensionales y tridimensionales a los elementos. Combina varias funciones de transformación como translate, rotate, scale y skew.
Sintaxis:
element {
transform: transformation-function;
}
Donde:
transformation-function: función de transformación aplicada al elemento
Ejemplo de uso:
.element {
transform: translate(50px, 100px);
}
1.2 Transformación translate
La transformación translate se usa para mover un elemento en el eje X y/o Y.
Sintaxis:
element {
transform: translate(x, y);
}
Donde:
x: desplazamiento en el eje X (puede ser negativo o positivo)y: desplazamiento en el eje Y (puede ser negativo o positivo)
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformación translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: un elemento con dimensiones y color fijos.box:hover: al pasar el cursor sobre el elemento se aplica la transformacióntranslate(50px, 50px), moviéndolo 50 píxeles a la derecha y hacia abajo
1.3 Transformación rotate
La transformación rotate se utiliza para rotar un elemento alrededor de su centro.
Sintaxis:
element {
transform: rotate(angle);
}
Donde:
angle: ángulo de rotación en grados (puede ser negativo o positivo)
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformación rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: un elemento con dimensiones y color fijos.box:hover: al pasar el cursor sobre el elemento se aplica la transformaciónrotate(45deg), rotándolo 45 grados en el sentido de las agujas del reloj
1.4 Transformación scale
La transformación scale se usa para cambiar el tamaño de un elemento en el eje X y/o Y.
Sintaxis:
element {
transform: scale(sx, sy);
}
Donde:
sx: escalado en el eje X (un valor mayor a 1 aumenta el tamaño, menor a 1 lo reduce)sy: escalado en el eje Y (un valor mayor a 1 aumenta el tamaño, menor a 1 lo reduce)
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformación scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: un elemento con dimensiones y color fijos-
.box:hover: al pasar el cursor sobre el elemento se aplica la transformaciónscale(1.5, 1.5), aumentando su tamaño 1.5 veces en ambos ejes
1.5 Transformación skew
La transformación skew se utiliza para inclinar un elemento en el eje X y/o Y.
Sintaxis:
element {
transform: skew(ax, ay);
}
Donde:
ax: ángulo de inclinación en el eje X (puede ser negativo o positivo)ay: ángulo de inclinación en el eje Y (puede ser negativo o positivo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformación skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: un elemento con dimensiones y color fijos..box:hover: al pasar el cursor sobre el elemento se aplica la transformaciónskew(20deg, 10deg), inclinándolo 20 grados en el eje X y 10 grados en el eje Y.
1.6 Combinación de diferentes transformaciones
La propiedad transform permite combinar múltiples funciones de transformación para lograr efectos complejos.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformaciones combinadas</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: un elemento con dimensiones y color fijos.box:hover: al pasar el cursor sobre el elemento se aplican simultáneamente las transformacionestranslate,rotate,scaleyskew, creando un efecto complejo
GO TO FULL VERSION