Jake Archibald 6/17/2025

Animating zooming using CSS: transform order is important… sometimes

Read Original

This technical article investigates a quirky 'swooping' animation seen when zooming into images using CSS transforms. It demonstrates how the order of `scale()` and `translate()` functions, and even the presence of a seemingly neutral `rotate(0)`, can drastically change the animation's path, explaining the behavior according to the CSS specification.

Animating zooming using CSS: transform order is important… sometimes

Comments

No comments yet

Be the first to share your thoughts!

Browser Extension

Get instant access to AllDevBlogs from your browser

Top of the Week

2
Designing Design Systems
TkDodo Dominik Dorfmeister 2 votes
4
Introducing RSC Explorer
Dan Abramov 1 votes
6
Fragments Dec 11
Martin Fowler 1 votes
7
Adding Type Hints to my Blog
Daniel Feldroy 1 votes
8
Refactoring English: Month 12
Michael Lynch 1 votes
10