CSS Transform Generator
Compose 2D and 3D transforms with live preview. Copy the generated CSS.
Translate
Rotate
Scale
Skew
center
.element { transform: none; transform-origin: center; }
Frequently Asked Questions
What CSS transform functions are available?
CSS transform supports translate(X,Y), rotate(angle), scale(X,Y), skew(X,Y), and their 3D counterparts (translate3d, rotate3d, scale3d, perspective). You can chain multiple transforms: transform: translateX(20px) rotate(45deg) scale(1.2). Tip: order matters — transforms are applied right to left.
What is transform-origin and how does it work?
transform-origin sets the pivot point for rotations and scales. Default is 'center center'. You can use keywords (top left), percentages (0% 100%), or pixel values. Tip: set transform-origin: top left when building expand-from-corner animations for dropdown menus.
How does perspective work in CSS 3D transforms?
perspective defines how far the viewer is from the z=0 plane. Lower values (200-500px) create dramatic 3D effects; higher values (800-2000px) give subtle depth. Apply it on the parent container, or use perspective() inside the transform shorthand. Tip: 800-1200px is a good default for card flip effects.
Why should I prefer transform over top/left for animation?
transform and opacity are the only CSS properties that don't trigger layout reflows. Animating top, left, width, or height forces the browser to recalculate layout for every frame, causing jank. Transforms use the GPU compositor, giving smooth 60fps animations even on mobile devices.
How do I use CSS transforms in Tailwind CSS?
Tailwind provides translate-x-*, translate-y-*, rotate-*, scale-*, and skew-* utilities. For 3D effects, use arbitrary values: [transform:rotateY(45deg)]. Combine with transition-transform and duration-300 for smooth hover effects. hover:scale-105 is a popular pattern for interactive cards.