Transforms & Filters

🎨 CSS Visual Effects Lesson 13 Intermediate

CSS transforms move, rotate, scale, and skew elements without affecting document flow. CSS filters apply visual effects like blur and brightness directly in the browser — no image editor required.

1 2D Transforms

CSS — Transform Functions

.card:hover {
  /* Multiple transforms on one property */
  transform: translateY(-8px) scale(1.02) rotate(1deg);
  transition: transform 0.3s ease;
}

/* Individual functions */
transform: translateX(50px);        /* move right */
transform: translateY(-20px);       /* move up    */
transform: scale(1.5);              /* 150% size  */
transform: rotate(45deg);           /* clockwise  */
transform: skewX(10deg);            /* skew angle */

/* 3D transforms */
transform: rotateY(180deg);         /* card flip  */
transform: perspective(800px) rotateX(30deg);

2 CSS Filters

CSS — Filter Functions

img { filter: grayscale(100%); }
img:hover { filter: grayscale(0%) brightness(1.1); transition: filter 0.3s; }

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%); /* glassmorphism */
}

.dark-overlay { filter: brightness(0.6) contrast(1.2); }
.shadow-img   { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }

3 Code Challenge

Challenge: Build a glassmorphism card using backdrop-filter: blur(), a semi-transparent background, and a subtle border. Add a hover transform that lifts the card.