Transforms
📌 Covered in this chapter:
transform · Translate · Scale · Rotate · Skew · transform-origin · 2D · 3D · Perspective · Hover Effects · Compositing · Performance
Welcome to Chapter 33: Transforms — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1CSS Transforms Overview
CSS transforms elements ni 2D or 3D space lo visually transform cheyyadaniki use chestayi — layout reflow trigger cheyadu (position unchanged in document flow for 2D).
CSS — Card Hover▶ Try in Editor
.card:hover {
transform: translateY(-6px) scale(1.02);
}
.card {
transition: transform 200ms ease;
transform-origin: center bottom;
}22D & 3D Transforms
CSS
.slide-in { transform: translateX(20px); }
.zoom { transform: scale(1.2); }
.rotate { transform: rotate(45deg); }
.skew { transform: skewX(-5deg); }
.scene {
perspective: 800px;
}
.flip-card {
transform: rotateY(180deg);
transform-style: preserve-3d;
}Performance: transform and opacity compositor-friendly — 60fps animations ki ideal. width/height animate cheyakandi.