Chapter 9 ■ angularJS animationTransforms
You can transform a web page element in several ways: you can rotate it, scale it, move it, or distort it along its
horizontal and vertical axes (a process called skewing). Using a transform, you could, for example, make an image
increase in size when a user mouses over it. You can even use multiple transformations at once, allowing you to, say,
rotate an element and increase its size.
The CSS property in charge of transforms is called, unsurprisingly, the transform property. It needs to know the
type of transformation you want and a value indicating how much to transform the element. For example, to rotate an
element, you would use the keyword rotate, followed by the number of degrees to rotate it.
It’s surprisingly easy to set up transforms. Listing 9-1 shows one in action.
Listing 9-1. A Basic Transform
<!DOCTYPE html>
Here we have a single div element with an id of square. In the CSS, we give it some basic styling, so that we can
see it as a red square with a green border when we load it into a browser. The part in which we are interested is the
transform property that we used within #square:hover. Here, we add two effects at once: a scale and a rotate effect.
The scale function is given a number, a multiplication factor of 1.3, which causes it to scale up slightly larger than it
initially appeared. The rotate is given a number suffixed with the CSS unit deg, which causes it to rotate 20 degrees.
■ Tip Some CSS units, like deg, make intuitive sense. others, like the em unit used on the margin rule in the previous
CSS code listing, often do not. an em is equal to the current font size. What this means is that, for example, if the font size
of the document is 12 pt., 1 em is equal to 12 pt. unlike pixels, which are an absolute measure, ems are scalable. this
means that 2 em would equal 24 pt., 0.5 em would equal 6 pt., and so forth. the em is becoming increasingly popular in
web documents, due to this scalability and the mobile-device-friendly nature of this.