-
Book Overview & Buying
-
Table Of Contents
Web Developer's Reference Guide
By :
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.
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%);
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.
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
The scale() function scales an element. It's also the shorthand for scaleX() and scaleY() functions. It accepts a numeric value without a unit. The numeric value represents the proportion in which the element will be scaled. For example, 2 means that the element will be scaled...
Change the font size
Change margin width
Change background colour