Topic 24 of 30
Transforms
Overview
CSS transforms move, rotate, scale, and skew elements in 2D and 3D without affecting document layout. Filters apply visual effects like blur, brightness, and grayscale. Both are GPU-accelerated when used with animation.
Syntax
css
/* 2D Transforms */
transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, -20px);
transform: scale(1.1);
transform: rotate(45deg);
transform: skewX(10deg);
/* Multiple transforms */
transform: translateY(-4px) scale(1.02) rotate(0deg);
/* 3D Transform */
transform: perspective(1000px) rotateY(30deg);
transform-style: preserve-3d;
/* Transform origin */
transform-origin: center bottom; /* rotate from bottom */
/* CSS Filters */
filter: blur(8px);
filter: brightness(0.8);
filter: grayscale(100%);
filter: contrast(120%);
filter: saturate(150%);
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
filter: blur(4px) brightness(0.5); /* combine */
/* Backdrop filter (glassmorphism) */
backdrop-filter: blur(12px) saturate(180%);Common Pitfalls
- transform creates a new stacking context — elements with transform may appear above elements with higher z-index in parent contexts.
- backdrop-filter requires a background with some transparency to see the blur effect.
- Interview tip: Animate transform and opacity only — they're GPU-accelerated. Animating width, height, top, left causes layout reflow and is expensive.
Real-World Example
A 3D flip card and glassmorphism modal:
example
css
/* Flip card on hover */
.flip-card { perspective: 1000px; }
.flip-card-inner {
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-front, .flip-back {
backface-visibility: hidden;
position: absolute;
inset: 0;
}
.flip-back { transform: rotateY(180deg); }
/* Glassmorphism modal */
.glass-modal {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 215, 0, 0.15);
border-radius: 20px;
}
/* Image hover effects */
.team-card img {
transition: filter 0.3s ease, transform 0.3s ease;
}
.team-card:hover img {
filter: brightness(1.1) saturate(120%);
transform: scale(1.05);
}