CSS Transform Generator
Build CSS transforms visually: translate, rotate, scale, skew and 3D.
About this tool
Drag the sliders to move, rotate, scale and skew a sample box, choose the transform origin, and switch on 3D for rotateX/rotateY with perspective. The CSS updates live and includes the equivalent individual translate, rotate and scale properties.
How CSS transforms work
The transform property changes how an element is drawn without affecting the layout around it. translate() moves it, rotate() turns it, scale() resizes it and skew() slants it, all relative to transform-origin (the centre by default). Because transforms skip layout and are usually handled by the GPU, they're the smoothest way to animate hover effects, menus and cards. Order matters: functions are applied right to left, so translate(50px) rotate(45deg) is different from rotate(45deg) translate(50px), and the generator keeps a predictable order. For 3D, rotateX and rotateY tilt the element in space, and the parent's perspective value sets how dramatic the depth looks (smaller is stronger). That's the basis of card flips and tilt effects. Modern browsers also support the separate translate, rotate and scale properties, which you can animate independently without rewriting the whole transform. Honest limits: transformed elements can overlap their neighbours because surrounding space isn't adjusted. Scaling and skewing text can make it blurry, and large or fast motion should respect prefers-reduced-motion. The CSS animation generator, the cubic-bezier generator and the clip-path generator are related.
Frequently asked questions
How do I rotate an element in CSS?
Use transform: rotate(15deg). Set transform-origin to change the pivot point.
Does the order of CSS transforms matter?
Yes. They apply right to left, so rotate-then-translate differs from translate-then-rotate.
How do I make a 3D card flip?
Add perspective to the parent and rotateY(180deg) to the card, usually with a transition.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.