This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
On day 66, I’ve introduced you to individual transform properties. An interesting detail about these properties is the order in which transforms are applied compared to the transform property.
If you use the transform property, transformation functions are applied in the order of appearance, from left to right.
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>.button1 {
transform: translateX(50px) scale(1.5);
}
.button2 {
transform: scale(1.5) translateX(50px);
}With individual transform properties, the order of appearance of the declarations doesn’t matter. The order is always the same: translate –> rotate –> scale.
.button3 {
translate: 50px 0;
scale: 1.5;
}
.button4 {
scale: 1.5;
translate: 50px 0;
}If you mix transform and individual properties, individual transforms get applied first.
.button5 {
transform: translateX(50px);
scale: 1.5;
}
.button6 {
transform: scale(1.5);
translate: 50px 0;
}My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-13T09:38:54+00:00) Day 81: the order of individual transform properties. Retrieved from https://www.scien.cx/2023/01/13/day-81-the-order-of-individual-transform-properties/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.