2D Shear Matrix Generator
Generate and visualize 2D shear transformation matrices along the X or Y axis in real time. Inspect coordinate distortions, verify area preservation ($\det = 1$), transform custom vector points, and export to CSS, LaTeX, Python, and JavaScript.
transform: matrix(1, 0, 1, 1, 0, 0); /* skewX(-45deg) */
How to Calculate 2D Shear Transformation Matrices
A 2D shear matrix slides points parallel to a coordinate axis by an amount proportional to their perpendicular distance. For an X-axis shear S_x(k), x' = x + k*y while y remains unchanged. For a Y-axis shear S_y(k), y' = y + k*x while x remains unchanged. The determinant is always 1, meaning geometric area is strictly conserved.
What is a 2D Shear Mapping? (Transvection)
In linear algebra and affine geometry, a shear mapping (also known as a transvection) is an elementary linear transformation that displaces each point in a fixed direction by an amount proportional to its signed perpendicular distance from a line parallel to that direction.
Imagine a standard rectangular deck of playing cards resting flat on a table. If you place your hand on top of the deck and push horizontally, the bottom card remains completely stationary while every card above it shifts sideways by an amount proportional to its height in the stack. The rectangular profile becomes a parallelogram, yet the total volume and surface area remain entirely unchanged.
Points along the X-axis (where y = 0) do not move. Points farther from the X-axis shift horizontally in proportion to their vertical elevation y.
Points along the Y-axis (where x = 0) remain fixed. Points farther from the Y-axis shift vertically in proportion to their horizontal distance x.
Mathematical Derivation of 2D Shear Matrices
Every linear transformation on the 2D Cartesian plane ℝ² is fully determined by its action on the standard basis vectors e₁ = [1, 0]ᵀ and e₂ = [0, 1]ᵀ:
Under a horizontal shear with factor k:
- Basis vector e₁ = [1, 0]ᵀ maps to: S_x · [1, 0]ᵀ = [1 + k(0), 0]ᵀ = [1, 0]ᵀ
- Basis vector e₂ = [0, 1]ᵀ maps to: S_x · [0, 1]ᵀ = [0 + k(1), 1]ᵀ = [k, 1]ᵀ
Arranging these transformed column vectors side by side constructs the canonical matrix:
Under a vertical shear with factor k:
- Basis vector e₁ = [1, 0]ᵀ maps to: S_y · [1, 0]ᵀ = [1, 0 + k(1)]ᵀ = [1, k]ᵀ
- Basis vector e₂ = [0, 1]ᵀ maps to: S_y · [0, 1]ᵀ = [0, 1 + k(0)]ᵀ = [0, 1]ᵀ
Constructing the matrix from transformed column vectors yields:
Core Algebraic & Geometric Theorems
Because det(S_x) = (1)(1) - (k)(0) = 1, shear matrices belong to the Special Linear Group SL(2, ℝ). The transformation is equi-areal: every polygon retains its exact 2D area.
Reversing a shear requires merely negating the factor: S_x(k) · S_x(-k) = I₂. The set of all shears along a single axis forms a continuous 1-parameter Abelian Lie group.
The characteristic equation is (1 - λ)² = 0, giving eigenvalue λ = 1 with multiplicity 2. However, there is only one independent eigenvector [1, 0]ᵀ, making the matrix defective (Jordan canonical form).
The factor k relates directly to the angular slant θ via k = tan(θ). A 30° skew produces k = tan(30°) ≈ 0.577, while a 45° slant produces k = 1.0.
CSS 2D Transforms, OpenGL & WebGL Integration
Modern web rendering engines and GPU graphics pipelines implement shear operations through affine transform matrices:
In CSS, the 2D transform matrix is defined in column-major order as matrix(a, b, c, d, tx, ty):
Real-World Applications of Shear Matrices
When a dedicated italic font face is unavailable, rasterizers generate pseudo-italics (oblique text) by applying a horizontal shear of k ≈ 0.21 (approx. 12° slant) to glyph vector outlines.
Calculating shear stress τ = F / A and engineering shear strain γ = Δx / L in structural beams, seismic cross-bracing, and soil mechanics under tectonic lateral loading.
Rectifying angled camera snapshots of documents or license plates by estimating and inverting the affine shear distortion prior to optical character recognition.
Modeling laminar fluid flow between parallel plates where fluid layers slide past one another with a constant velocity gradient (dv/dy = constant shear rate).
Graded Step-by-Step Worked Problems
Given a unit square with vertices O(0,0), A(1,0), B(1,1), and C(0,1), determine the transformed vertex coordinates under a horizontal shear S_x with factor k = 1.5.
Result: The unit square transforms into a parallelogram with vertices (0,0), (1,0), (2.5,1), and (1.5,1). Base = 1, Height = 1, Area = 1.0 (Area preserved!).
A vector was transformed by vertical shear S_y(0.8) into v' = (5, 9). Find the original coordinate vector v.
Result: The original vector was v = (5, 5).
Common Pitfalls & Misconceptions
Rotation preserves all internal angles and distances (isometry), whereas shearing preserves parallel lines and area but changes side lengths and interior angles.
Applying S_x(k₁) then S_y(k₂) yields a different matrix than S_y(k₂) then S_x(k₁). Matrix multiplication order must be strictly preserved in graphics transformation stacks.
In standard CSS skewX(deg), positive angles shift top edges to the left (negative k), whereas in Cartesian mathematics, positive k shifts in the positive X direction. Use matrix(1, 0, k, 1, 0, 0) to avoid sign ambiguity.
Lead Developer & Founder of Basic Math Tools. Specializes in browser-native computational algorithms and applied mathematics.
Mathematics & curriculum specialists. Audited against standard algebraic and arithmetic principles.