Propiedad Transform Origin en CSS: Modificación del Eje de Rotació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 😉

Víctor Hugo Torres Fierro

Pues así quedó el ejercicio de hoy:

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

Saludos.

Yefri Enmanuel Encarnación Jiménez

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 😉

Isaac Hernandez Resendiz

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

Daniel Florez Valencia

hace 3 años

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

Laura Camila Pregonero

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

<!DOCTYPE html>

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

Manuel De León

Esto es divertido xD

Jorge Fidel Zubieta Choque

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

Francisco Javier Solis Martinez

hace 3 años

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

ronal mora

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>

Omar Gabriel Aguilar Moscoso

chevere

Fabian Flores

Notas de la clase

Raúl Adolfo Sánchez Rodríguez

**⭐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)

Raúl Adolfo Sánchez Rodríguez

**⭐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)

Juan David Santamaria Gomez

Jorge Luis Rueda Marin

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.

Raymondi Alejandro Ramos Vásquez

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.

Andres Osteicoechea

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;

Rafael Martínez Rodríguez

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

Luis Antonio Martínez Cárcamo

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.

Carlos Mazzaroli