Square example object transformed with skewX

The figure in the middle is sheared by ${\displaystyle -30^{\circ }}$.
To make the triangles equilateral it is stretched horizontally by ${\displaystyle {\frac {1}{\sin(60^{\circ })}}~=~{\frac {2}{\sqrt {3}}}\approx 1.1547}$.
(The transforms are executed from right to left, so the stretching happens before the shearing.)

This is how the three figures look in the SVG code:

<use xlink:href="#object" />

<use xlink:href="#object" transform="skewX(-30) scale(1.1547 1) translate(133, 0)" />

<use xlink:href="#object" transform="skewX(-45) translate(300, 0)" />