My name is Sofi. I am CSS engineer. This is my blog.

If you're really hurt without styles, you can them on.


The order of applying transformations

Every block is transformed by transformation matrix, which is computer based on transform, transform-origin, translate, rotate and scale properties.

This properties are applied in the following order:

  1. Change the center of block transformation according to the transform-origin property.
  2. Move block according to the value of translate property
  3. Rotate block according to the value of rotate property.
  4. Scale block according to the value of scale property.
  5. Apply every function from transform property by the list from right to left.

What does it mean to us as developers?

Using the individual properties of transformations, it is not possible to control the order in which they are applied.

пример применения индивидуальных свойств трансформации

Whereas the functions in the transform property are applied in the order in which they are specified.

пример применения свойства transform

Also, ALL functions from transform are applied, but individual transformation properties override each other as common css properties.

пример применения свойства transform



If you see a link to this article in a source that is not listed here, please let me know.