-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
We are going to explore a whole new set of properties with the goal of being able to arbitrarily scale an element using CSS. This is the last core technique we need to learn to complete the ZUI, and the properties involved are called CSS3 transforms.
With CSS3 transforms we can apply some modifiers to the elements on a page, namely:
translateX(x), translateY(y), and translate(x,y): These modifiers move the element along one or both axes by a distance specified by the x and y variables (in px)
rotate(deg): It rotates the element by the value specified by the deg variable, which must be expressed in grades (from 0 to 360 degrees)
scaleX(s), scaleY(s), and scale(s,[s]): It scales the element of the value specified by a scale factor s where a scale of 1 corresponds to keeping the element at the same size
skewX(k) and skewY(k): It applies a skew transformation by the given k angle expressed in grades (from 0 to 360 degrees)
There's also a
matrix modifier that accepts six parameters...
Change the font size
Change margin width
Change background colour