The idea: one vector that stands up from a parallelogram
Two vectors a and b in 3D span a parallelogram with corners 0, a, a + b and b. Their cross product a × b is a single vector that describes that parallelogram completely: it points perpendicular to it, and its length is its area. Which of the two perpendicular directions it takes is fixed by the right-hand rule.
On the canvas a is red, b is blue, their parallelogram is light blue and a × b is purple. Pick a and b from the menus and everything follows; the grey arrow is a × b before the change. Turn View turns the picture about the z-axis so you can see that the purple arrow really stands at right angles to the parallelogram.
The formula: a determinant with î ĵ k̂ on top
For a = (a₁, a₂, a₃) and b = (b₁, b₂, b₃):
Each component is a 2×2 determinant: cover that component's column and cross-multiply what is left. For the x part cover the î column and take a₂b₃ − a₃b₂. The indices go round in a cycle, 2 → 3, 3 → 1, 1 → 2, so the y part is a₃b₁ − a₁b₃ (written the other way, it is the familiar "minus" in the middle of the expansion). With a = (2, 0, 1) and b = (0, 2, 1): x = 0·1 − 1·2 = −2, y = 1·0 − 2·1 = −2, z = 2·2 − 0·0 = 4, so a × b = (−2, −2, 4). Work It Out does this on the canvas: the orange cells are the product that is added, the pink cells the product that is taken away (Demo: work out (2, 0, 1) × (0, 2, 1)).
Perpendicular to both a and b
A dot product of 0 means a right angle. For the example, a·(a × b) = 2·(−2) + 0·(−2) + 1·4 = 0 and b·(a × b) = 0·(−2) + 2·(−2) + 1·4 = 0. This is no accident: written out, a·(a × b) is the 3×3 determinant with rows a, a, b, and a determinant with two equal rows is 0. So a × b is perpendicular to every vector in the plane of a and b.
Length = area
The parallelogram has base |a| and height |b| sin θ, where θ is the angle between a and b. Its area is |a||b| sin θ, and that is exactly |a × b|. A way to check it without angles is Lagrange's identity:
|a × b|² = |a|²|b|² − (a·b)²
For a = (2, 0, 0), b = (1, 2, 0): 4·5 − 2² = 16, so the area is 4, and indeed a × b = (0, 0, 4) (Demo: length = parallelogram area). When a and b are parallel the parallelogram is flat, sin θ = 0, and a × b = 0: (1, 1, 0) × (2, 2, 0) = (0, 0, 0) (Demo: parallel vectors give 0). That makes the cross product a quick test for parallel vectors.
The right-hand rule, and why order matters
Two arrows are perpendicular to the parallelogram, one on each side. Point the fingers of your right hand along a and curl them toward b the short way round: the thumb points along a × b. For the axes this gives the cycle î × ĵ = k̂, ĵ × k̂ = î, k̂ × î = ĵ (Demo: î × ĵ = k̂, the right-hand rule). Going round the other way gives a minus sign: ĵ × î = −k̂. In general b × a = −(a × b): swapping a and b swaps two rows of the determinant, which flips every component (Demo: swap the order: the arrow flips). Unlike the dot product, the cross product is not commutative, and it is not associative either: (î × î) × ĵ = 0 but î × (î × ĵ) = −ĵ.
Surface normals in 3D graphics
A 3D model is a mesh of triangles. For a triangle with corners P, Q, R, take two edges a = Q − P and b = R − P. Then a × b is perpendicular to the triangle, the unit normal is n̂ = (a × b)/|a × b|, and the triangle's area is |a × b|/2 (half the parallelogram). With a = (2, 0, 1), b = (0, 2, 1): n̂ = (−2, −2, 4)/√24 ≈ (−0.41, −0.41, 0.82) and the area is √24/2 ≈ 2.45 (Demo: the normal of a triangle). Renderers use the normal for lighting (a face lit by light from direction L gets brightness proportional to n̂·L) and for back-face culling: the order of the corners (counter-clockwise when seen from outside) decides which way n̂ points, and faces turned away from the camera are skipped. The same normal gives the equation of the triangle's plane, as on The Plane Ax + By + Cz + D = 0.
Dot product and cross product side by side
| Dot product a·b | Cross product a × b | |
|---|---|---|
| result | a number | a vector (in 3D) |
| size | |a||b| cos θ | |a||b| sin θ = parallelogram area |
| 0 when | a ⟂ b | a ∥ b |
| order | a·b = b·a | b × a = −(a × b) |
| a with itself | |a|² | 0 |
| used for | angles, projections, lighting | normals, torque, area, orientation |
See also 2D Vectors and the Dot Product (where a₁b₂ − a₂b₁ is the z part of this cross product), Determinant (signed area in 2D; |a·(b × c)| is the volume of a parallelepiped), The Plane Ax + By + Cz + D = 0, 3D Rotation Matrix (Rodrigues' formula uses k × v), Convex Hull (the 2D cross product as a left/right turn test) and the Lorentz force F = q v × B.
What the page leaves out
Only small integer vectors are offered, and the view is orthographic. Not shown: the scalar triple product a·(b × c) as a volume, the vector triple product a × (b × c) = b(a·c) − c(a·b), the cross product as the matrix [a]× times b, how it changes under a mirror (it is a pseudovector), the 7-dimensional cross product, the wedge product of geometric algebra, and physics uses such as torque r × F and angular momentum.