Chapter 9 ■ angularJS animation
This effect is surprisingly easy to accomplish. Figure 9-2 shows what it looks like in a web browser. On the left is
the starting state, and on the right is the transformed state.
This is all well and good, and transforms, in general, have many practical uses, but this is really just a two-frame
animation. This is because the transform was applied as soon as the user hovered over the div element. One moment
it was not rotated, then it was. Often, a more desirable effect can be achieved by getting the web browser to create a
smooth transition from one state to the other. This is where CSS transitions come in.
One very important note about this and other code listings in this section is that I have omitted vendor prefixes.
I have done this solely to avoid clutter and repetition, but the reality is that you will need to use them in your own
projects. For example, the preceding transform property would generally look something like the following:
-webkit-transform: scale(1.3) rotate(20deg);
-moz-transform: scale(1.3) rotate(20deg);
-o-transform: scale(1.3) rotate(20deg);
-ms-transform: scale(1.3) rotate(20deg);
transform: scale(1.3) rotate(20deg);
Browser developers use CSS vendor prefixes to add new browser features that may not be part of a formal
specification and to implement features in a browser specification that have not been finalized. This makes for a less
than ideal situation in which you have to cover your bases so that the transform works across different browsers. If
you are a fan of CSS preprocessors, such as SASS and Stylus, you will be used to vendor prefixes being handled for you
automatically. If you aren’t a fan of such tools, or if you have not discovered them yet, I recommend that you look into
adopting one. These tools have a wide range of features that can make CSS much more intuitive and make you much
more productive.
Figure 9-2. A transform using scale and rotate, before and after