Transform
CSS transforms have gained such popularity that it's rare not to see some sort of transformation in a website nowadays—from button shapes and animations to layouts.
Let's dig in.
transform
The transform CSS property allows us to scale, rotate, skew, and translate elements in 2D and 3D spaces, and it looks like this:
transform: translate(-10px, 10%);
Description
This property supports the following values: scale(), skewX() and skewY(), translate(), rotate(), matrix(), and perspective().
Note that X-axis equals horizontal and Y-axis equals vertical.
Tip
An easy way to remember which axis is which is by saying this: "x is a cross so the x-axis is across". http://tiny.cc/xy-axis
scale()
The scale() function scales an element. It's also the shorthand ...
Get Web Developer's Reference Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
