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).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 relojsx: 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).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 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).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..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
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:
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:
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:
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:
<!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:
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:
GO TO FULL VERSION