The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

64 Chapter 6

Before I introduce the first new property in this module, I’ll briefly

introduce the concepts of coordinates and axes. If you’re already familiar

with these, feel free to skip this section; otherwise, read on.

Understanding Axes and Coordinates

One syntax concept that’s new to CSS3 is that of the axis (or axes when

you have more than one). You may know all about axes if you remember

your math lessons, but if you’re reading this section, I assume you need a

refresher.

CSS uses the Cartesian coordinate system, which consists of two lines, one

horizontal and one vertical, that cross each other at a right angle. Each of

these lines is an axis: The horizontal line is known as the x-axis, and the

vertical line is known as the y-axis. The point where the two lines meet is

called the origin. You can see this illustrated in Figure 6-1.

origin

x-axis

y-axis

− +

−

+

Figure 6-1: The x- and y-axes and the point of origin

For onscreen items, you measure the lengths of these axes in pixels. In

Figure 6-1, you can see the axes and origin are overlaid on a grid. Imagine

that each square corresponds to a single pixel. You’ll also notice positive (+)

and negative (−) labels at either end of each axis; these tell you that the dis-

tance away from the origin will be measured either positively or negatively

in this direction.

Now that you understand this concept, you can find the coordinates of

any point relative to the origin. The coordinates are a pair of values—one for

each axis—that indicate the distance from the origin. The origin has coor-

dinates (0, 0). For example, given the coordinates (3, 4), you would find

the point by moving 3 pixels along the x-axis, and 4 pixels along the y-axis

(remember the first line on each axis is 0 and is not counted). Likewise, the

coordinates (−3, −1) indicate a point 3 pixels in a negative direction away