Transforms, Filters & Clipping

Visual Effects in CSS

2D Transforms

Function	Effect	Example
translate(x, y)	Move element	transform: translate(10px, -5px)
rotate(angle)	Rotate	transform: rotate(45deg)
scale(x, y)	Resize	transform: scale(1.5)
skew(x, y)	Tilt	transform: skewX(-5deg)

3D Transforms

Enable 3D space on the parent: perspective: 1000px;

Function	Axis
rotateX()	Flips toward/away from viewer
rotateY()	Flips left/right like a door
rotateZ()	Spins like a wheel (same as rotate())
translateZ()	Moves closer/farther from viewer

CSS Filters

Filter	Effect	Performance
blur()	Gaussian blur	⚠️ Heavy on large areas
brightness()	Lighten/darken	✅ Fast
contrast()	Adjust contrast	✅ Fast
grayscale()	Remove color	✅ Fast
saturate()	Increase/decrease color intensity	✅ Fast
hue-rotate()	Shift colors on color wheel	✅ Fast
drop-shadow()	Shadow following shape (not box)	⚠️ Moderate

backdrop-filter

Applies filters to the area behind an element (glassmorphism):

.glass {
  backdrop-filter: blur(10px) saturate(180%);
  background: hsl(0 0% 100% / 0.7);
}

clip-path

Creates non-rectangular shapes by clipping the visible area:

Shape	Code
Circle	clip-path: circle(50%)
Ellipse	clip-path: ellipse(50% 30%)
Triangle	clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
Diagonal	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%)