Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Categories:
Supported by:
Visualize the effect of CSS transforms
CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple transformations.
Firefox helps with a cool visualization tool that allows you to see how and where the element was before being transformed, and how it is now.
Being able to compare the 2 states at the same time makes it easier to debug your transform CSS properties.
- Select the transformed element in the Inspector.
- Find the
transformproperty in the Rules sidebar panel. - Hover over the property value.
- The on-page highlighter appears.
