The horizontal axis, usually called the x-axis, is the left-to-right reference line for locating points in a two-dimensional coordinate system. In a browser viewport, its origin is at the top-left corner, positive x values extend rightward, and pixels are the usual unit. section 1.4.9
Use the horizontal axis to reason about:
- CSS positioning and DOM measurements, where an element's horizontal position is measured from the viewport origin. section 1.4.9
- Mouse interaction, where event.clientX reports the pointer's horizontal viewport coordinate. section 1.4.9 section 13.4
- Motion and angles, where 0° points right along the positive x-axis and angles increase clockwise because screen y values increase downward. section 10.1
Converting a movement into horizontal and vertical parts
A 100px movement at 30° from horizontal has an x component of 86.6px and a y component of 50px. JavaScript or CSS can calculate those components with cosine and sine. section 10.1
x = length * Math.cos(θ)
y = length * Math.sin(θ)
Calculate the horizontal and vertical components of a movement from its length and angle. section 10.1
