No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Propiedad Transform Origin en CSS: Modificación del Eje de Rotación

7/20
Recursos

El origen es el punto en el cual la transformación se ejecutará. La propiedad transform-origin permite cambiar el origen de las transformaciones, que por defecto está en el centro del elemento.

Representación de la propiedad transform-origin

Revisa la Cheat Sheet para conocer la sintaxis y los valores que recibe.

Contribución creada por Andrés Guano.

Aportes 21

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 😉

Pues así quedó el ejercicio de hoy:

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

Saludos.

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 😉

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

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

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

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

Aqui un codepen jugando con los diferentes valores de transform-origin 😁
https://codepen.io/fran88/pen/MWGBgoJ?editors=1100

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

Notas de la clase

**⭐Propiedad transform-origin** ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaG5mZ3hucGloeHJmam5tdmxmNHprOTNpNXpzN25sd3VrM3poM3p0YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hRoCpjt8kCXtknSKaG/giphy.gif) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaXBzOXg0ZWlyc3kza2dwYWZvdmhnd2NlYmRnZzBkanN4aDRhNTB4ciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zkGYmsQp8xDJ2jJbBt/giphy.gif) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXJ2cDQyMGxlY2JxZm9rM2lycTdnbnY5cGNiNjhmbGVlbXE2Mm4zMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SbryrJyWAScTnpzJnW/giphy.gif)
**⭐Tutorial: entiende el funcionamiento de la propiedad CSS transform-origin** **📌Propiedad transform-origin con valores por default** ![](https://static.platzi.com/media/user_upload/Tutorial-1-848228d3-090e-4896-9f03-a4be67388149.jpg) ![](https://static.platzi.com/media/user_upload/Tutorial-2-133db6e8-65c0-4a68-9cf8-beee588753ff.jpg) \- Resultado: ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaG5mZ3hucGloeHJmam5tdmxmNHprOTNpNXpzN25sd3VrM3poM3p0YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hRoCpjt8kCXtknSKaG/giphy.gif) ![](https://static.platzi.com/media/user_upload/Tutorial-3-5a64bd3d-c637-4bee-90f8-bda1c47b3e60.jpg) **📌Suavizando el efecto producido por la propiedad TRANSFORM** ![](https://static.platzi.com/media/user_upload/Tutorial-4-c37ceccc-0bec-4766-ad8b-e38dd70ec6d1.jpg) ![](https://static.platzi.com/media/user_upload/Tutorial-5-61f1a219-1d3a-4234-881f-6301f98736fa.jpg) **⭐Propiedad transform-origin con valores definidos: top left** ![](https://static.platzi.com/media/user_upload/Tutorial-6-23e7e779-99c1-4185-8931-d382ce55df01.jpg) ![](https://static.platzi.com/media/user_upload/Tutorial-7-4e105c3f-683d-4fdb-845c-00799387d1f3.jpg) \- Resultado ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaXBzOXg0ZWlyc3kza2dwYWZvdmhnd2NlYmRnZzBkanN4aDRhNTB4ciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zkGYmsQp8xDJ2jJbBt/giphy.gif) **⭐Propiedad transform-origin con valores definidos: bottom right** ![](https://static.platzi.com/media/user_upload/Tutorial-8-c92c876b-f2f2-4bbd-a46e-e8bc8c12be77.jpg) ![](https://static.platzi.com/media/user_upload/Tutorial-9-09d2ce7d-f2aa-47bb-ab24-87a331a91db5.jpg) \- Resultado: ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXJ2cDQyMGxlY2JxZm9rM2lycTdnbnY5cGNiNjhmbGVlbXE2Mm4zMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SbryrJyWAScTnpzJnW/giphy.gif)

.

Con todo el respeto y aprecio por Estefy, creo a sus explicaciones le falta un poco más de profundidad, creo que no solo se trata de explicar el uso básido de una funcionalidad o propiedad, Creo que faltan más ejemplo con mayor amplitud y aplicabilidad.

Origin es el punto donde va a suceder las transformaciones.
 
Bueno, según MDN sería: La propiedad CSS transform-origin le permite modificar el origen de las transformaciones de un elemento.

Para crear un punto de origen (ej un punto de rotacion) la propiedad transform-origin debe ser declarada dentro del elemento en si y no en el trigger, a esta prpiedad se le debe asignar el valor en position, por ejemplo si queremos asignar nuestro eje de rotacion a la esquina inferior derecha debemos colocar: transform-origin: bottom right;

Con lo visto hasta el momento del curso se abre un mundo de posibilidades para jugar con los elementos de nuestra página web

transform-origin es una propiedad en CSS que especifica el punto de origen de una transformación en un elemento. Esto significa que permite especificar desde dónde se realizará una transformación, como rotación o escala, en un elemento.

El punto de origen se especifica mediante coordenadas x e y, y puede ser especificado en píxeles, porcentajes o valores especiales como top, bottom, left, right, center. Por ejemplo:

css

.element {
   transform: rotate(45deg);
   transform-origin: center;
}

En el ejemplo anterior, el punto de origen de la rotación será el centro del elemento. Si se especifica un punto de origen diferente, la transformación se realizará en torno a ese punto en lugar del centro del elemento.

Es importante tener en cuenta que transform-origin puede ser útil para lograr efectos específicos en una animación o transformación, y su uso correcto puede hacer una gran diferencia en el resultado final.

❤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>