Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Transform origin

7/20
Recursos

Aportes 13

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Básicamente transform origin es el punto base desde el cual se aplica una transformación, por ejemplo, en este caso podemos ver distintos origins, en la primera figura el punto morado está en el centro, por lo que la figura rotará desde ese mismo centro.
.
En la segunda figura, el punto morado está en una de las esquinas, por lo que podemos ver cómo la figura va rotando pero desde esa esquina 😄

Así como podemos cambiar el punto de origen de la rotación, podemos hacerlo con cualquier propiedad de transform 😉

Transform origin es una propiedad el punto o posición especifica en la cual se aplica la transformación. Esta recibe valores para X, Y, Z; sus valores por defecto son:

transform-origin: 50% 50%;

a lo que es igual

transform-origin: center;  

Los valores relativos que recibe transform origin como: top, left, bottom left, 80% 20%, etc. Hacen referencia al tamaño o el espacio que ocupa el elemento en contexto.

El elemento en contexto en la mayoría de los casos será el elemente al cual se le este aplicando la transformación, sin embargo puede haber casos en la cual será su padre o uno de sus ancestros, como pasa los SVG; pero tranquilo, si te topas con un caso así existe la propiedad transform-box para definir el elemento en contexto con el cual el transform y transform-origin esta relacionado.

Si quieres saber más sobre Trasnform Box aquí tienes documentación 😉

Pues así quedó el ejercicio de hoy:

Gran curso hasta el momento! nuca había hecho transformaciones, muchas gracias Estefany Aguilar!

Saludos.

Gracias profe eres la mejor ❤️ acá dejo un resumen aplicado de las propiedades 2D de transformación
https://codepen.io/AMillanir/pen/qBmWWoO

ohhh este curso me abrio la cabeza y ya quiero hacer todo el curso!!! gracias a la liga por ello!

Hola Todos! este es mi código, probé haciendo muchas mas figuras para ver su comportamiento y me gusto el resultado.

<!DOCTYPE html>

<html lang=“en”>
<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

 <style>

   .Div_1 {
      background: lightsteelblue;
      width: 150px;
      height: 100px;
      transform-origin: left top;
      margin: 5rem;
     }

   .Div_1:hover {
     transform: rotate(90deg);
   }

   .Div_2 {
      background: lightslategrey;
      width: 150px;
      height: 100px;
      transform-origin: right top;
      margin: 5rem;
   }

   .Div_2:hover {
    transform: rotate(90deg);
   }

</style>

</head>

<body>

<div class="Div_1"></div>
<div class="Div_2"></div>

</body>
</html>

Esto es divertido xD

rotación con transición

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 5rem;
            width: 150px;
            height: 150px;
            background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
            border-radius: 20%;
            transform-origin: right top;
        }
        div:hover{
            transform: rotate(-45deg);
            transition: 1s;
        }
        div:
    </style>
</head>
<body>
    <div></div>
</body>
</html>

chevere

Aquí podrán ver algunos ejemplos que hice de esta clase y de algunas pasadas

Notas de la clase

OJO esta propiedad debe estar puesta en el objeto; no en la la pseudoclase(En caso de usarla) 😃

❤Origin

Transform origin es una propiedad el punto o posición especifica en la cual se aplica la transformación. Esta recibe valores para X, Y, Z; sus valores por defecto son:

  • Código

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 100px;
                background: lightpink;
                transform-origin: right bottom;
    
            }
            div:hover {
                transition: 2000ms;
                transform: rotate(-180deg);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>