Transform & 3D Effects
CSS transforms move, rotate, scale, and skew elements without affecting layout. Combined with perspective, you can create 3D card flips, depth effects, and interactive UI elements - all with pure CSS.
Transform Functions
- translateX(20px), translateY(-10px) - Move horizontally/vertically. translate(x, y) for both
- scale(1.2) - Scale up 120%. scaleX() and scaleY() for individual axes
- rotate(45deg) - Rotate clockwise. rotateX() and rotateY() for 3D rotation
- skew(10deg) - Skew/slant the element. Rarely used but creates parallelogram shapes
- Multiple transforms - transform: translateY(-10px) rotate(5deg) scale(1.1). Order matters!
- transform-origin - The pivot point: center center (default), top left, bottom right
- perspective - Adds 3D depth: perspective: 1000px on parent. Lower = more dramatic 3D effect
- backface-visibility: hidden - Hides the back of a 3D-rotated element (for card flips)
Transform & 3D Code
/* Hover transforms */
.card:hover { transform: translateY(-8px) scale(1.02); }
.icon:hover { transform: rotate(360deg); transition: transform 0.5s; }
/* 3D card flip */
.flip-card { perspective: 1000px; width: 300px; height: 200px; }
.flip-card-inner {
width: 100%; height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%; height: 100%;
backface-visibility: hidden;
border-radius: 12px;
}
.flip-card-back {
transform: rotateY(180deg);
}
/* 3D tilt on hover */
.tilt-card {
transition: transform 0.3s ease;
}
.tilt-card:hover {
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}Tip
The 3D card flip is one of the most impressive pure-CSS effects: perspective on the container, transform-style: preserve-3d on the inner wrapper, rotateY(180deg) on hover, and backface-visibility: hidden on both faces. Once you understand this pattern, you can create flip cards, menus, and reveal animations.
Transitions for state changes, @keyframes for complex multi-step animations
Common Mistake
The order of multiple transforms matters. transform: translateY(-10px) scale(1.1) and transform: scale(1.1) translateY(-10px) produce different results because transforms are applied right-to-left. When combining, always test the order - usually translate comes last so scaling doesn't affect the translation distance.
Practice Task
Build a 3D card flip: (1) .flip-card with perspective: 1000px, (2) .flip-card-inner with transform-style: preserve-3d + transition: transform 0.6s, (3) .flip-card:hover .flip-card-inner with rotateY(180deg), (4) .front and .back with backface-visibility: hidden, (5) .back with rotateY(180deg) as initial state.
Quick Quiz
Key Takeaways
- CSS transforms move, rotate, scale, and skew elements without affecting layout.
- translateX(20px), translateY(-10px) - Move horizontally/vertically. translate(x, y) for both
- scale(1.2) - Scale up 120%. scaleX() and scaleY() for individual axes
- rotate(45deg) - Rotate clockwise. rotateX() and rotateY() for 3D rotation