3.1 Fundamentos de las transformaciones combinadas
CSS ofrece la posibilidad de combinar varias transformaciones para crear efectos visuales complejos.
Estas transformaciones pueden incluir translate, rotate, scale y skew,
que pueden ser combinadas en una sola propiedad transform.
La propiedad transform puede contener varias funciones de transformación separadas por espacios. Se aplicarán
secuencialmente, en el orden en que se especifican. Entender cómo las distintas transformaciones interactúan entre sí
es clave para crear animaciones y efectos complejos.
Sintaxis:
element {
transform: function1() function2() ... functionN();
}
Ejemplo:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Traslación y rotación
En este ejemplo, el elemento se desplaza 50 píxeles a la derecha y 50 píxeles hacia abajo, luego se rota 45 grados.
Ejemplo:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traslación y rotación</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: el elemento primero se desplaza 50 píxeles a la derecha y hacia abajo, luego se rota 45 grados en el sentido de las agujas del reloj
3.2 Análisis de diferentes combinaciones
1. Escalado e inclinación
En este ejemplo, el elemento se escala 1.5 veces en ambos ejes, luego se inclina 20 grados en el eje X y 10 grados en el eje Y.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Escalado e inclinación</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
.box: el elemento primero se escala 1.5 veces en ambos ejes, luego se inclina 20 grados en el eje X y 10 grados en el eje Y
2. Traslación, rotación y escalado
En este ejemplo, el elemento se desplaza 100 píxeles a la derecha, se rota 30 grados y se escala 2 veces en el eje X y 1.5 veces en el eje Y.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traslación, rotación y escalado</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicación del código:
-
.box: el elemento primero se desplaza 100 píxeles a la derecha, luego se rota 30 grados y se escala 2 veces en el eje X y 1.5 veces en el eje Y
3.3 Impacto del orden de las transformaciones
Cuando se combinan varias transformaciones, es importante entender que se aplican secuencialmente. Esto significa que cada transformación subsiguiente afectará el resultado de la anterior.
En este ejemplo se muestra cómo el cambio en el orden de las transformaciones afecta al resultado final.
Ejemplo A: primero rotar, luego trasladar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primero rotar, luego trasladar</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Ejemplo B: primero trasladar, luego rotar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primero trasladar, luego rotar</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Explicación del código:
-
.box-a: el elemento primero se rota 45 grados, luego se desplaza 50 píxeles a la derecha y hacia abajo, lo que hace que el elemento se mueva en diagonal desde su nueva posición después de la rotación -
.box-b: el elemento primero se desplaza 50 píxeles a la derecha y hacia abajo, luego se rota 45 grados, lo que hace que el elemento gire en relación con su nueva posición
GO TO FULL VERSION