CSS Transform Generator
Transform
Advertisement
CSS transform Property
The transform property applies 2D and 3D visual transformations to an element without affecting document flow. Transformed elements don't push other elements around.
2D Transform Functions
translate(x, y)— move element from its original positionrotate(deg)— clockwise rotation in degreesscale(x, y)— resize (1 = original, 0.5 = half, 2 = double)skewX(deg)/skewY(deg)— slant along an axis
3D Transform Functions
rotateX(deg)/rotateY(deg)/rotateZ(deg)— 3D rotationsperspective(n)— depth of the 3D scene in pixelstranslateZ(n)— move toward or away from the viewermatrix3d()— advanced combined 3D transform
Does transform affect layout flow?
No — transformed elements do not affect surrounding elements. The space the element originally occupied is preserved. This is why transforms are preferred over changing top/left for animations.
How does transform-origin work?
transform-origin sets the pivot point for rotations and scaling. Default is 50% 50% (center). Change it to top left to rotate from a corner, or 0 0 for precise positioning.
Can I combine multiple transforms?
Yes — list multiple functions in a single transform property: transform: rotate(45deg) scale(1.2) translateX(20px);. Note that order matters — transforms are applied right to left.