Transform origin

Curso de Transformaciones y Transiciones en CSS

Importancia de las animaciones web

5 razones para usar animaciones en la web

Conceptos iniciales

Propiedades para crear animaciones con CSS y propiedades animables

Pseudo-clases y pseudo-elementos en las animaciones

Timing functions, planos y ejes

Transformaciones en 2D y 3D

Transform translate

Transform rotate, scale, skew y matrix

Transform origin

Transform style y perspective

Backface visibility

Parallax con transformaciones

Efecto parallax: estructura HTML

Efecto parallax: estilos CSS

Transiciones

Transition property y duration

Transition timing function y delay

Tips de UX

Movimiento impulsado por la acción

Tiempos de espera

Problemas de parpadeo

Rendimiento y accesibilidad

Propiedades recomendadas y no recomendadas para animar

Aceleración de hardware y la propiedad will-change

Preferencias de movimiento reducido

Libros recomendados y próximos pasos

Continúa en el Curso de Animaciones con CSS

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Iniciar sesión

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.

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

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.

RetaxMaster

Profe Platzi

hace 2 años

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

hace 2 años

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

hace 2 años

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

hace 2 años

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

Angel Millanir

hace 2 años

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

Laura Camila Pregonero

hace 2 años

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

hace 2 años

Esto es divertido xD

Jorge Fidel Zubieta Choque

hace 2 años

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

Daniel Florez Valencia

hace un año

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

Francisco Javier Solis Martinez

hace un año

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

ronal mora

hace 2 años

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

hace 2 años

chevere

Fabian Flores

hace 2 años

Notas de la clase

Raymondi Alejandro Ramos Vásquez

hace 12 días

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

hace 21 días

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

hace 7 meses

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

hace 8 meses

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

hace 2 años

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