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)
, andtranslate(x,y)
: These modifiers move the element along one or both axes by a distance specified by thex
andy
variables (in px)rotate(deg)
: It rotates the element by the value specified by thedeg
variable, which must be expressed in grades (from 0 to 360 degrees)scaleX(s)
,scaleY(s)
, andscale(s,[s])
: It scales the element of the value specified by a scale factors
where a scale of1
corresponds to keeping the element at the same sizeskewX(k)
andskewY(k)
: It applies a skew transformation by the givenk
angle expressed in grades (from 0 to 360 degrees)
There's also a
matrix
modifier that accepts six parameters...