No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Transform origin

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 18

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

Gracias profe eres la mejor 鉂わ笍 ac谩 dejo un resumen aplicado de las propiedades 2D de transformaci贸n
https://codepen.io/AMillanir/pen/qBmWWoO

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=鈥渆n鈥>
<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!

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

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

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.

鉂rigin

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>