Table of Contents

About

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.

Transformation

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>

Procedure

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;
}

Example

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

Below:

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

Example:

  • The CSS
circle {
   fill:#ECDCC6;
}
  • The Svg
<svg>
<circle cx="40" cy="50" r="30" />
<circle cx="40" cy="100" r="30" transform="matrix(0 1 2 0 0 0)" />
</svg>
  • The output:
Rendered by WebCode

Documentation / Reference