CSS Tools/CSS Transform Generator
CSS Transform Generator
Create CSS transforms visually with translate, rotate, scale, and skew controls
Transform Controls
Translate
0px
0px
Rotate
0°
Scale
1.0
1.0
1.0
Skew
0°
0°
Presets
Preview
Element
Dashed border shows original position
CSS Code
css
Loading...CSS Transform Guide
Learn about CSS transforms and how to create visual effects
What is CSS Transform?
CSS transforms allow you to modify the visual presentation of elements by translating (moving), rotating, scaling, and skewing them. Transforms don't affect the document flow - other elements remain in place while the transformed element moves visually.
Transform Functions
- translate(): Move elements horizontally and vertically
- rotate(): Rotate elements around a center point
- scale(): Increase or decrease element size
- skew(): Tilt elements along X and Y axes
How to Use
- Use the translate controls to move the element
- Adjust rotation to spin the element
- Scale to resize the element
- Enable 3D mode for perspective transforms
Tips
- Combine multiple transforms for complex effects
- Use transform-origin to change the pivot point
- 3D transforms need perspective on parent element
Frequently Asked Questions
What's the difference between translate and position?
Translate moves an element visually without affecting document flow - other elements stay in place. Position (relative, absolute) can affect layout and sibling elements. Translate is also GPU-accelerated, making it better for animations.
How do I change the transform origin?
Use the transform-origin property to set the pivot point. Default is 'center center'. You can use keywords (top, left, center, right, bottom), percentages, or pixel values. For example, 'transform-origin: top left' rotates from the top-left corner.
Why isn't my 3D transform working?
3D transforms require perspective to show depth. Add 'perspective: 1000px' to the parent element. Also ensure 'transform-style: preserve-3d' is set if you have nested 3D transforms. The perspective value controls how pronounced the 3D effect appears.
Can I animate transforms?
Yes, transforms are ideal for animations. Use CSS transitions or keyframe animations on the transform property. Transforms are hardware-accelerated, providing smooth 60fps animations. Combine with 'will-change: transform' for best performance.
What order do transforms apply in?
Transforms apply right to left. 'transform: rotate(45deg) translate(100px)' first translates, then rotates. The order matters because each transform affects subsequent ones. To translate then rotate, use 'transform: translate(100px) rotate(45deg)'.