CSS Transform Generator
Note: A transformed element keeps its original box for layout purposes, so nothing around it moves out of the way. It does become the containing block for any fixed-position descendant, which is a surprising way for a fixed header to stop being fixed.
transform-origin is the second lever. Everything rotates and scales around it, and it defaults to the element's centre — but in SVG it defaults to the origin of the coordinate system instead, which is why an SVG icon set spinning orbits its top-left corner. Setting transform-box: fill-box brings SVG into line with the HTML behaviour.
The 3D functions need a perspective value on the parent to do anything convincing. Without it, rotateY produces a flat horizontal squash rather than the sense of a card turning; perspective supplies the vanishing point that makes the near edge larger than the far one. Smaller values mean a closer viewer and a more extreme effect — around 800px to 1200px reads as natural, and below 400px looks like a fisheye lens.
One performance note that is genuinely worth acting on: transform and opacity are the two properties the compositor can animate without recalculating layout, which is why animating position through translate is smooth and animating left is not.
Frequently Asked Questions
Why does changing the order of my transforms change the result?
Because each function operates on the coordinate system the one to its right has already produced — the list applies right to left. Rotating then translating moves the element along a tilted axis; translating then rotating moves it along the page's axis and spins it in place.
Why does my 3D rotation look flat?
There is no perspective. Without it, a rotateY is drawn as an orthographic squash with no vanishing point. Put perspective on the parent element, or use the perspective() function first in the transform list, and the near edge will be drawn larger than the far one.
Why does my SVG rotate around the wrong point?
In SVG, transform-origin resolves against the origin of the SVG coordinate system rather than the element's own box, so it orbits the top-left corner. Adding transform-box: fill-box alongside transform-origin: center makes it behave the way it does in HTML.
Should I animate transform or position?
Transform, always, when you have the choice. It and opacity are the only two properties the compositor can animate without recalculating layout on every frame. Animating left, top, width or height forces a layout pass sixty times a second.
Does a transform affect the layout around it?
No, and this is often the point. A transformed element still occupies its original box for layout purposes — neighbours do not move out of the way. It does create a containing block for fixed-position descendants, which occasionally surprises people badly.
