CSS

These two media features are essential for accessibility and personalization. They let you respect the user’s preferred color scheme (light/dark) and contrast level. Overview of Features Feature Description Values prefers-color-scheme User’s preferred color scheme light, dark prefers-contrast User’s preferred contrast level no-preference, more, less, custom 1. prefers-color-scheme The prefers-color-scheme media feature detects whether the user…

These two media features prioritize user comfort and performance. One respects users who want less data usage, the other respects users who are sensitive to motion. Overview of Features Feature Description Values prefers-reduced-data User wants lighter data usage no-preference, reduce prefers-reduced-motion User wants less animation/motion no-preference, reduce 1. prefers-reduced-data The prefers-reduced-data media feature detects if…

These two media features address accessibility (transparency preferences) and legacy display technology (interlaced vs progressive scanning). Overview of Features Feature Description Values prefers-reduced-transparency User wants less transparency no-preference, reduce scan Monitor’s scanning process interlaced, progressive 1. prefers-reduced-transparency The prefers-reduced-transparency media feature detects if the user has requested reduced transparency — important for users who have…

These three media features let you adapt styles based on JavaScript availability, display refresh capability, and HDR video support. Overview of Features Feature Description Values scripting Detects JavaScript availability none, initial-only, enabled update How often the display can update none, slow, fast video-dynamic-range Dynamic range of the video plane standard, high 1. scripting The scripting…

45. Transform Property Introduction The transform property is one of the most powerful tools in CSS. It lets you rotate, scale, skew, and translate elements — all without affecting the layout of other elements. What is the transform Property? The transform property applies 2D or 3D transformations to an element. Unlike properties like margin or…

The matrix() and matrix3d() functions are the most powerful — and most complex — transform functions in CSS. They let you apply exact mathematical transformations using matrices. Overview Function Dimensions Matrix Size Values matrix() 2D 3×3 (6 values) a, b, c, d, e, f matrix3d() 3D 4×4 (16 values) a through p 1. matrix() —…

These three properties unlock the third dimension in CSS. With perspective, rotate3d, and transform-style, you can create stunning 3D effects like cubes, cards, and spatial interfaces. Overview of Features Property/Function Description Values perspective Distance from viewer to z=0 plane Length (e.g., 600px) rotate() 2D rotation around a fixed point Angle (e.g., 45deg) rotate3d() 3D rotation…

48. transform rotateX, rotateY, and rotateZ These three functions are the individual axis rotations in CSS 3D transforms. Each one rotates an element around a specific axis: X (horizontal), Y (vertical), or Z (depth). Overview of Functions Function Axis Equivalent Visual Effect rotateX() Horizontal rotate3d(1, 0, 0, angle) Tilts forward/backward rotateY() Vertical rotate3d(0, 1, 0,…

The scale() and scale3d() functions let you resize elements — making them larger or smaller — without affecting the layout of surrounding elements. Overview of Functions Function Dimensions Values Description scale() 2D s or s1, s2 Uniform or separate X/Y scaling scale3d() 3D s1, s2, s3 X, Y, and Z scaling 1. scale() — 2D…

These three functions are the individual axis scaling functions in CSS transforms. Each one scales an element along a specific axis: X (horizontal), Y (vertical), or Z (depth). Overview of Functions Function Axis Equivalent Effect scaleX() Horizontal scale3d(s, 1, 1) Stretches width scaleY() Vertical scale3d(1, s, 1) Stretches height scaleZ() Depth scale3d(1, 1, s) Stretches…