translate transform: translate(20px, 10px) | scale transform: scale(1.4) | rotate transform: rotate(25deg) | skew transform: skew(15deg, 5deg) |
The same two functions, written in opposite order, produce visibly different results — the last-written function is applied first (closest to the element), the first-written function is applied last.
translate then rotate — spins in place, then shifts transform: translate(30px, 0) rotate(45deg) | rotate then translate — orbits around the origin transform: rotate(45deg) translate(30px, 0) | scale then translate transform: scale(1.3) translate(15px, 0) | translate then scale transform: translate(15px, 0) scale(1.3) |
The same rotate(45deg) pivoting around different origins.
origin: center (default) transform: rotate(45deg) | origin: top left transform: rotate(45deg) | origin: bottom right transform: rotate(45deg) | origin: 25% 75% transform: rotate(45deg) |
identity matrix transform: matrix(1, 0, 0, 1, 0, 0) | translate via matrix transform: matrix(1, 0, 0, 1, 20, 10) | scale via matrix transform: matrix(1.3, 0, 0, 1.3, 0, 0) | skew via matrix transform: matrix(1, 0.3, 0, 1, 0, 0) |
3D rotations project onto the flat page as an axis-aligned foreshortening (narrower/shorter), with no vanishing point - PeachPDF does not support perspective(), so there's never a tapered/trapezoidal look.
rotateX(50deg) transform: rotateX(50deg) | rotateY(50deg) transform: rotateY(50deg) | rotate3d(1,1,0,45deg) transform: rotate3d(1, 1, 0, 45deg) | translateZ (no visible effect) transform: translateZ(300px) |
+ border-radius transform: rotate(15deg) | + gradient background transform: rotate(-10deg) scale(1.2) | Hello + text content (whole subtree transforms) transform: rotate(12deg) | multi-function chain transform: translate(10px, 0) rotate(20deg) scale(1.2) |