2.1 Propiedad transform-origin
La propiedad transform-origin en CSS define el punto desde el cual se aplican transformaciones como
rotate, scale, skew, y translate. Por defecto, este punto está en
el centro del elemento, pero puedes cambiar su posición para lograr los efectos visuales que desees.
Conceptos básicos de transform-origin
Sintaxis de la propiedad transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Dónde:
x-axis: define la posición del punto en el eje horizontaly-axis: define la posición del punto en el eje verticalz-axis: define la posición del punto en el eje Z (utilizado para transformaciones 3D)
Valores posibles:
- Palabras clave:
top,right,bottom,left,center - Valores porcentuales: establecen el punto de origen en porcentajes del tamaño del elemento
- Valores absolutos: establecen el punto de origen en píxeles u otras unidades de medida
Ejemplos de valores:
transform-origin: 50% 50%;— centro del elemento (valor por defecto)transform-origin: 0 0;— esquina superior izquierda del elementotransform-origin: 100% 100%;— esquina inferior derecha del elementotransform-origin: 50px 100px;— desplazamiento de 50 píxeles a la derecha y 100 píxeles hacia abajo desde la esquina superior izquierda
Centro del punto de origen (por defecto)
En este ejemplo, la transformación rotate ocurrirá alrededor del centro del elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centro del punto de origen</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Desplazamiento del punto
Desplazamiento del punto de origen a la esquina superior izquierda
En este ejemplo, el punto de origen de la transformación se desplaza a la esquina superior izquierda del elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto de origen en la esquina superior izquierda</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Desplazamiento del punto de origen a la esquina inferior derecha
En este ejemplo, el punto de origen de la transformación se desplaza a la esquina inferior derecha del elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto de origen en la esquina inferior derecha</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Definiendo valores
Uso de valores porcentuales
En este ejemplo, el punto de origen de la transformación está al 25% horizontalmente y al 75% verticalmente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto de origen con valores porcentuales</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Uso de valores absolutos
En este ejemplo, el punto de origen de la transformación se desplaza 50 píxeles horizontalmente y 20 píxeles verticalmente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto de origen con valores absolutos</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Aplicación práctica
Rotación de un elemento alrededor de un punto específico
Usar transform-origin es útil para crear elementos rotatorios que deben girar
alrededor de un punto específico. Por ejemplo, crear la aguja de un reloj.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotación de la aguja del reloj</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Ejemplo para la posición de la 1 en punto */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Creación de un elemento escalable
Cambiar el punto de origen también es útil para escalar elementos respecto a diferentes puntos, lo cual puede ser útil para crear interfaces dinámicas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento escalable</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION