Transform - Skew +Y

(250,250) (500,250) (0,250) (250,0) (250,500) (500,0) (0,0) (0,500) (500,500) +10° +45° +60° -10° -45° 60°

Skew +Y

In our first example, the original (red) square is skewed vertically (Y) by +10°, +45°, and +60° into blue shapes. The angle of skew is from the horizontal as marked. The only 'translation' or displacement is horizontally to align our skewed shapes vertically. Since the skew is positive in the Y axis, the displacement is 'down' from the originating position.

<rect x="10" y="20" width="50" height="50" fill="red" />
<rect x="10" y="20" width="50" height="50" fill="blue" transform="skewY(10) translate(60)"/>
<rect x="10" y="20" width="50" height="50" fill="blue" transform="skewY(45) translate(60)"/>
<rect x="10" y="20" width="50" height="50" fill="blue" transform="skewY(60) translate(60)"/>

Skew -Y

The second example begins with a red square skewed vertically (Y) by -10°, -45°, and -60°. Because the direction of displacement is now 'up', we start our progression at the bottom. Translation is applied to align the skewed shapes vertically:

<rect x="260" y="200" width="50" height="50" fill="red"/>
<rect x="260" y="200" width="50" height="50" fill="blue" transform="skewY(-10) translate(60,56)"/>
<rect x="260" y="200" width="50" height="50" fill="blue" transform="skewY(-45) translate(60,260)"/>
<rect x="260" y="200" width="50" height="50" fill="blue" transform="skewY(-60) translate(60,438)"/>

This example shows a skew that is negative in the Y axis, therefore the displacement is 'up' from the originating position.

 

All done.