ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 163

1 in X direction X-axis 9 in X direction

X-axis

3 in Y
direction

1 in Y direction

Z-axis

Overall direction vector (9,3,0)

Z-axis

1 in Z direction

Overall direction vector (1,1,1)

Y-axis Y-axis

Now it's your turn: Try adjusting the vector values in this example to make
the elements rotate in all sorts of weird and wonderful directions! For example,
using a vector of 1,1,1 would cause the element to rotate around a line that travels
downward at 45 degrees between the X, Y, and Z axes. A vector of 9,3,0 would cause
the element to rotate around a line traveling down and right 30 degrees from the X
axis and 60 degrees from the Y axis but not traveling at all in the Z direction. You
can see visualizations of these values in Figure 5.9 .
Note that the individual numbers in the vector values don't matter; it is the
proportions that matter. So, for example, 78,78,78 will result in the same direction
vector as 1,1,1. You can also use negative vector values to make your direction vector
travel in the opposite direction. For example, -1,-1,0 makes the element rotate
around a line that is 45 degrees between the X and Y axes but runs left and up, not
right and down, as positive values would produce.

FIGURE 5.9 Visualizing direc-
tion vectors.

NOTE: Be clear on the way the axes travel! As I've said before,
positive X is right; negative X is left. Positive Y is down; negative Y
is up. Positive Z is out of the screen; negative Z is into the screen.