Hover Lift Card
Move a card upward and slightly increase its scale to create responsive hover feedback.
CSS Transform Generator
Free CSS Transform Tool
Create 2D and 3D CSS transforms visually. Move, rotate, scale and skew an element, adjust its transform origin and transition, then copy clean CSS code.
This CSS Transform Generator is a free visual tool for creating 2D and 3D
transformations without calculating values manually. It combines translate,
rotate, scale, skew and axis-based rotation functions into one generated
transform declaration.
You can also control transform-origin and add a transition for
smooth interactive effects. The tool is useful for buttons, cards, images,
menus, modals, hover states and animated UI components.
Move a card upward and slightly increase its scale to create responsive hover feedback.
Apply a rotation transform to icons, loading indicators and decorative interface elements.
Use horizontal translation to move menus, sidebars and off-canvas panels into view.
A small skew value can create angled labels, banners and promotional headings.
Combine perspective and Y-axis rotation to create an interactive card flip effect.
The CSS transform property changes the visual position, size,
angle or perspective of an element without changing the normal document
flow around it.
.element {
transform: rotate(15deg);
}
Translation moves an element along the horizontal or vertical axis. Positive X values move right, while positive Y values move down.
.element {
transform: translate(40px, -20px);
}
.move-right {
transform: translateX(80px);
}
.move-up {
transform: translateY(-30px);
}
The rotate() function turns an element around its transform
origin. Positive angles rotate clockwise.
.rotated-element {
transform: rotate(25deg);
}
Scaling changes the visual size of an element. A value above
1 makes it larger, while a value between 0 and
1 makes it smaller.
.larger-element {
transform: scale(1.2);
}
.smaller-element {
transform: scale(.8);
}
Separate scale functions can change only the width or height of an element.
.wide-element {
transform: scaleX(1.4);
}
.tall-element {
transform: scaleY(1.3);
}
Skew tilts an element along the horizontal or vertical axis. Large skew values can make text and controls difficult to read.
.skewed-element {
transform: skew(12deg, 0deg);
}
Several transform functions can be placed in one declaration. Their order matters because each function affects the coordinate system used by the next one.
.combined-transform {
transform:
translate(40px, -10px)
rotate(12deg)
scale(1.1);
}
These two declarations can produce different visual results because rotation and translation are applied in a different order.
.first-example {
transform: translateX(80px) rotate(30deg);
}
.second-example {
transform: rotate(30deg) translateX(80px);
}
The transform-origin property defines the pivot point used for
rotation and scaling. The default is the center of the element.
.top-left-rotation {
transform: rotate(25deg);
transform-origin: top left;
}
.center {
transform-origin: 50% 50%;
}
.top-left {
transform-origin: left top;
}
.bottom-center {
transform-origin: center bottom;
}
A transition allows transforms to change smoothly between normal, hover, focus and active states.
.card {
transition: transform 300ms ease;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
}
.button {
transition: transform 180ms ease;
}
.button:hover {
transform: scale(1.05);
}
.button:active {
transform: scale(.98);
}
.panel {
transform: translateX(-100%);
transition: transform 300ms ease;
}
.panel.is-open {
transform: translateX(0);
}
The rotateX() and rotateY() functions rotate an
element in three-dimensional space.
.card {
transform: rotateY(35deg);
}
Perspective controls how strongly depth is perceived. It can be applied to a parent element or included as a transform function.
.scene {
perspective: 900px;
}
.card {
transform: rotateY(35deg);
}
.element {
transform:
perspective(900px)
rotateX(18deg)
rotateY(-22deg);
}
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
position: relative;
transform-style: preserve-3d;
transition: transform .6s ease;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
The transform-style: preserve-3d property allows child
elements to retain their own positions in three-dimensional space.
The backface-visibility property controls whether the reverse
side of a rotated element is visible.
.card-face {
backface-visibility: hidden;
}
Transform changes only the visual rendering of an element. The original layout space remains unchanged. This differs from margins, positioning and layout properties that can affect surrounding elements.
Applying a transform creates a new stacking context. This can affect
z-index, fixed-position descendants and how elements overlap.
Large scale values or fractional translations can occasionally make text appear slightly soft. Avoid unnecessary transforms on long blocks of body text.
Transforms should not move important content off-screen without an accessible way to return it. Interactive effects must remain usable with a keyboard and should not depend only on hover.
Disable or simplify large animated transformations for users who prefer reduced motion.
@media (prefers-reduced-motion: reduce) {
.animated-element {
transition: none;
animation: none;
}
}
Transform and opacity are usually efficient properties to animate because they often avoid full document layout recalculation. Excessive 3D layers, very large transformed elements and many simultaneous animations can still increase rendering cost.
It visually moves, rotates, scales, skews or changes the perspective of an element without changing its normal document flow.
Translate changes the visual location of an element while preserving its original layout space. Positional properties can affect layout and containing blocks.
Yes. Add multiple transform functions to one declaration, but remember that their order affects the final result.
It controls the pivot point around which rotation, scaling and related transformations occur.
Add a transition such as
transition: transform 300ms ease; and change the transform
value on hover, focus or through a class.
Use functions such as rotateX() and
rotateY() together with perspective.
No. Transforms change visual rendering but preserve the element's original layout space.
Yes. Transform is generally one of the most efficient CSS properties to animate, especially when combined with opacity.