CSS Transforms
CSS Transforms — Manipulate elements in 2D and 3D space with CSS transforms: translate, rotate, scale, skew, and more. The guide walks through What are CSS Transforms?, 2D Transform Functions, Transform Origin and 3D Transforms, Transform Performance and Patterns. CSS Transforms let you modify the position, size, and rotation of elements without affecting the document layout. Basic syntax: .element { transform: function(value); } Multiple transforms: .element { transform: translateX(50px) rotate(45deg) scale(1.2); } Key characteristics: - Doesn't affect document flow - Creates a new stacking context - Often GPU-accelerated for smooth performance - Combines with transitions/animations for motion - Transform… Translate: Move elements .element { transform: translateX(50px); } /* Move right 50px */ .element { transform: translateY(-20px); } /* Move up 20px */ .element { transform: translate(50px, -20px); } Perfect centering: .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Rotate: .element { transform: rotate(45deg); } /* Clockwise 45 degrees */ .element { transform: rotate(-90deg); } /*…