CodeGym/Cursos/Frontend SELF ES/Centro de Transformaciones

Centro de Transformaciones

Disponible

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 horizontal
  • y-axis: define la posición del punto en el eje vertical
  • z-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 elemento
  • transform-origin: 100% 100%; — esquina inferior derecha del elemento
  • transform-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.

HTML
<!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.

HTML
<!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.

HTML
<!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.

HTML
<!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.

HTML
<!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.

HTML
<!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.

HTML
<!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>
1
Tarea
Frontend SELF ES,  nivel 23lección 1
Bloqueada
Rotación centrada
Rotación centrada
1
Tarea
Frontend SELF ES,  nivel 23lección 1
Bloqueada
Rotación en el ángulo
Rotación en el ángulo
Comentarios
  • Populares
  • Nuevas
  • Antiguas
Debes iniciar sesión para dejar un comentario
Esta página aún no tiene comentarios