Gosub transforms test

2D and 3D transforms — translate, scale, rotate, skew, transform-origin, perspective. Dashed outlines mark the original (untransformed) box.

2D transforms

translate
translate(20px,14px)
scale
scale(1.2)
scaleX/Y
scaleX(1.3) scaleY(.7)
rotate
rotate(20deg)
skew
skew(-18deg,6deg)
combo
translate + rotate + scale
flip
scaleX(-1) mirror

transform-origin

center
center (default)
top left
top left
bot right
bottom right

3D transforms (perspective)

rotateX
rotateX(45deg)
rotateY
rotateY(45deg)
rotateZ
rotateZ(30deg)
3D
rotateX + rotateY

preserve-3d cube

front
back
right
transform-style: preserve-3d with translateZ faces