How to move elements with translate() without affecting layout
Scale elements larger or smaller with scale()
Rotate elements in 2D and 3D space with rotate()
Create perspective effects with skew()
Combine multiple transforms and understand order of operations
Control the transform anchor point with transform-origin
Work with 3D transforms using perspective
Build a 3D flip card with backface-visibility and preserve-3d
Introduction to CSS Transforms
CSS transforms allow you to manipulate elements in 2D and 3D space without affecting the document layout.
Unlike changing position properties like top or left, transforms are GPU-accelerated
and provide smooth, performant animations.
Transforms are essential for modern web animations and interactions. They're commonly used for hover effects,
loading animations, carousels, and interactive UI components. Because they don't trigger layout recalculations,
transforms can animate at 60fps even on lower-powered devices.
translate() - Moving Elements
The translate() function moves an element from its current position along the X and Y axes.
The element visually moves but its original space in the document layout is preserved.
/* Move along both X and Y axes */
transform: translate(50px, 20px);
/* Move only horizontally */
transform: translateX(50px);
/* Move only vertically */
transform: translateY(30px);
/* Percentage values (relative to element's own size) */
transform: translate(50%, -25%);
scale() - Resizing Elements
The scale() function changes the size of an element. Values greater than 1 enlarge the element,
values less than 1 shrink it. You can scale uniformly or independently on each axis.
/* Uniform scaling */
transform: scale(1.5); /* 150% of original size */
/* Different X and Y scaling */
transform: scale(2, 0.5); /* 200% wide, 50% tall */
/* Scale individual axes */
transform: scaleX(1.5); /* Only scale width */
transform: scaleY(1.5); /* Only scale height */
/* Shrink an element */
transform: scale(0.8); /* 80% of original size */
rotate() - Spinning Elements
The rotate() function spins elements clockwise (positive values) or counter-clockwise
(negative values). Angles can be specified in degrees (deg), radians (rad),
or turns (turn).
The skew() function distorts elements by slanting them along the X and Y axes.
This creates a parallelogram effect and is useful for creating perspective or dynamic shapes.
/* Skew both axes */
transform: skew(20deg, 10deg);
/* Skew only horizontally */
transform: skewX(20deg);
/* Skew only vertically */
transform: skewY(10deg);
Combining Multiple Transforms
You can chain multiple transform functions in a single transform property.
Transforms are applied from right to left, and order matters—different
orders produce different results.
/* Combined transforms - applied right to left */
transform: translate(30px, -20px) rotate(45deg) scale(1.2);
/* Order affects the result! */
transform: rotate(45deg) translate(100px, 0); /* Rotate, then move */
transform: translate(100px, 0) rotate(45deg); /* Move, then rotate */
transform-origin - Changing the Anchor Point
The transform-origin property sets the point around which transforms are applied.
By default, transforms happen around the element's center (50% 50%), but you can
change this to any point.
/* Default - center of element */
transform-origin: center center;
transform-origin: 50% 50%;
/* Corner anchors */
transform-origin: top left;
transform-origin: 0 0;
transform-origin: bottom right;
transform-origin: 100% 100%;
/* Custom position */
transform-origin: 30px 40px;
3D Transforms with perspective
CSS supports 3D transforms that let you rotate and move elements in three-dimensional space.
To enable 3D effects, you must set perspective on a parent container.
/* Parent needs perspective to see 3D effects */
.container {
perspective: 600px;
}
.box {
/* Rotate around X axis (flip top/bottom) */
transform: rotateX(45deg);
/* Rotate around Y axis (flip left/right) */
transform: rotateY(45deg);
/* Rotate around Z axis (same as rotate()) */
transform: rotateZ(45deg);
/* Move toward/away from viewer */
transform: translateZ(50px);
/* 3D shorthand */
transform: translate3d(10px, 20px, 30px);
}
Building a 3D Flip Card
One of the most popular uses of 3D transforms is creating flip cards that reveal content on the back.
This technique combines perspective, transform-style: preserve-3d, and
backface-visibility: hidden.
.flip-card {
perspective: 1000px;
width: 200px;
height: 150px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d; /* Enable 3D for children */
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Hide back face when flipped */
}
.flip-card-back {
transform: rotateY(180deg); /* Pre-flip the back */
}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
Front Side
</div>
<div class="flip-card-back">
Back Side
</div>
</div>
</div>