Geometry - Skewing (Shearing)

Card Puncher Data Processing


Shear is a transform that rotates one axis so that the axes are no longer perpendicular. It means offsetting the coordinates along one or two axes based on the distance along the remaining axis.

Under shear, a rectangle becomes a parallelogram, and a circle becomes an ellipse.


Matrix multiplication

You set up a matrix transformation and multiply it by each vertex (node) of your object

The functional form <MATH> x' = c.y \\ y' = b.x </MATH> becomes the following matrix. <MATH> \begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} 0 & c \\ b & 0 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix} </MATH>

Using the standard transformation matrix notation, it would become: <MATH> \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 0 & c & 0 \\ b & d & 0 \\ 0 & 0 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} </MATH>


Example in 3D: displace vertices (nodes) in the XZ plane depending on the Y coordinate.

  • Define a vector with only X and Z:
vector = new Vector(1.0, 0, 1.0);
  • Loop through all the vertices, getting the Y coordinate, multiplying that by the shear value and then adding that offset back to the original vertex:-
for (i = 0; i < verts.Length; i++) {
    verts[i] = verts[i] + shear * verts[i].y;


In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(0 X Y 0 0 0).


  • we draw a rectangle without skew
  • we draw a rectangle with skew


  • The CSS
circle {
  • The Svg
<circle cx="40" cy="50" r="30" />
<circle cx="40" cy="100" r="30" transform="matrix(0 1 2 0 0 0)" />
  • The output:

Documentation / Reference

Discover More
Card Puncher Data Processing
Geometry - Ellipse

An ellipse is a predefined shape. Under shear, a circle becomes an ellipse.
Card Puncher Data Processing
Geometry - Transformation

Transformation of geometric objects. A geometric transformation is represented by a transformation matrix. Transformations that keep the origin fixed are linear including: , ...
Matrix Rotation 90
Geometry - Transformation Matrix

A geometric transformation can be represented by a matrix. THE advantage of using transformation matrices is that cumulative transformations can be described by simply multiplying the matrices that describe...
Inkscape Layout
Inkscape - Skew

in Inkscape

Share this page:
Follow us:
Task Runner