not - css uppercase first letter

Cuestiones de orden de transformación CSS3: la operación más a la derecha primero

Question

Cuando usamos la transform: operation1(...) operation2(...) CSS3 transform: operation1(...) operation2(...) , ¿cuál se hace primero?

La primera operación realizada parece ser la más a la derecha. , es decir, aquí se realiza operation1 antes de operation1 . Solo para estar seguro, ¿es cierto?

Nota: He leído una cosa y su contrario en algunos lugares (respuestas, artículos en Internet), así que la pregunta aquí.

Answer 1

Las transformaciones se realizan de izquierda a derecha . Las transformaciones corresponden a operaciones matriciales, y éstas se realizan de izquierda a derecha.

Hay intuición detrás de esto, no solo esto está literalmente en la especificación como regla normativa (punto 3 aquí: this )

Aquí hay una pluma para probar: https://codepen.io/monfera/pen/YLWGrM

Explicación:

Cada paso de transformación establece su propio sistema de coordenadas. Asi que

transform: translateX(500px);

establece un nuevo sistema de coordenadas de 500 px a lo largo del eje X de su padre y el elemento se representará allí.

Similar,

background-color: blue;
transform: translateX(500px) rotate(60deg);

primero establece un nuevo sistema de coordenadas 500px a lo largo del eje X (a la derecha) de su padre, y solo entonces , dentro de ese sistema de coordenadas (traducido, pero ahora es irrelevante) realiza la rotación. Así que será una forma que está a 500 píxeles a la derecha y girada en su lugar (alrededor del llamado transform-origin que se interpreta en el sistema de coordenadas local, y el 50% predeterminado para medios de rotación, rotación alrededor del centro del rectángulo, pero es un aparte).

El orden inverso

background-color: orange;
transform: rotate(60deg) translateX(500px);

Primero establece un nuevo sistema de coordenadas que se gira 60 grados con respecto al padre, y luego traduce 100px a lo largo del eje X del sistema de coordenadas ahora girado, en una dirección que no está realmente a la derecha desde el punto de vista global del documento (o usuario). ). Entonces, en este caso, es como si primero girara el papel y luego deslice la forma 500 unidades a lo largo del lado del papel (desde el origen, que en este caso es la esquina superior izquierda).

Para una discusión más avanzada, y para comprender cómo es posible entenderlo de manera intuitiva para ambas direcciones, consulte Transformaciones de composición : las transformaciones de CSS siguen el modelo de multiplicación posterior, así que busque la página con el encabezado "Piense en las transformaciones como en la transformación de lo local". Marco de coordenadas "(las ilustraciones parecen estar un poco apagadas)

Answer 2

Sí, la primera operación realizada es la más a la derecha, es decir, aquí la operation2 se realiza antes que la operation1 .

Aquí está la documentación: http://www.w3.org/TR/css-transforms-1/ pero todavía no he encontrado el párrafo sobre esto.

Ejemplo 1

Aquí la escala se realiza primero , y luego la traducción de 100px verticalmente (si la traducción se hiciera primero, la escala haría la traducción de 500px!)

#container { 
   position: absolute; 
   transform: translate(0,100px) scale(5); 
   transform-origin: 0 0; }

<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

Ejemplo 2

Aquí la traducción se hace primero , y luego la escala (la escala realizada después hace que la traducción se vea como una traducción de 500px)

#container { 
   position: absolute; 
   transform: scale(5) translate(0,100px); 
   transform-origin: 0 0; }

<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>