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

Clase 7 de 20 • Curso de Transformaciones y Transiciones en CSS

Resumen

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.

Ejemplo usando transform-origin con diferentes transformaciones{target="_blank"}

Contribución creada por Andrés Guano.

Carlos Eduardo Gomez García

teacher•

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

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

Carlos Rubio Gallego

student•

Muchas gracias por la explicación, se entiende mejor con este ejemplo.

Alexis Steven Valderrama

student•

wow

Víctor Hugo Torres Fierro

student•

Pues así quedó el ejercicio de hoy:

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

Saludos.

Jeremias Ezequiel Gonzalez

student•

Me gusto tu idea para llevar un recopilación de lo visto en clase, me inspirare en ello. Muchas gracias Victor.

Yefri Enmanuel Encarnación Jiménez

student•

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

student•

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

Daniel Florez Valencia

student•

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

Gabriel Valdez

student•

Buena observacion

LUIS ROBERTO CARICIO SANCHEZ

student•

¿Alguien sabe qué tema esta utilizando la profesora?

Thomas André Dale Guevara

student•

Synth Wave 84

Laura Camila Pregonero

student•

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>

Manuel De León

student•

Esto es divertido xD

Jorge Fidel Zubieta Choque

student•

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

Henry Jeffersson Salinas Arenas

student•

¿me pueden decir cual es la extension para que las letras y "<" salgan con ese color ?

Joalin Pineda

student•

¡Hola, Henry! 👋 Creo que el tema que ocupa la profesora en este curso es Synth Wave 84.

Herwing Eduardo Vázquez Macías

student•

¿Al momento de indicar el origen de rotación hay alguna forma de que esto se haga con propiedades lógicas?

Estefany Aguilar

teacher•

Sí, puedes indicarle la propiedad direction con el valor que necesites al momento de rotar o crear cualquier transformación.

Francisco Javier Solis Martinez

student•

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

ronal mora

student•

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>