DevTuts

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…

These transform functions slant or distort elements along the X or Y axis, creating a parallelogram effect. They’re useful for dynamic banners, stylized cards, and geometric layouts. Overview of Functions Function Axis Effect Equivalent skew() X and/or Y Slants both axes skewX() + skewY() skewX() Horizontal Slants left/right skew(angle, 0) skewY() Vertical Slants up/down skew(0,…

The translate() and translate3d() functions move elements from their original position — horizontally, vertically, or in 3D space. Unlike position or margin, translation doesn’t affect the layout of other elements. Overview of Functions Function Dimensions Values Description translate() 2D x or x, y Moves along X and Y translate3d() 3D x, y, z Moves along…

CSS transitions let you smoothly animate changes to CSS properties over a specified duration. They add polish, interactivity, and visual appeal — turning abrupt state changes into fluid motion. What is a Transition? A transition defines how a CSS property changes from one state to another over time. Instead of instantly jumping from red to…

These four longhand properties give you precise control over how transitions behave — which properties animate, how long they take, when they start, and how discrete changes are handled. Overview of Properties Property Description Default transition-property Which properties to animate all transition-duration How long the transition takes 0s transition-delay Wait before starting 0s transition-behavior How…

The animation property is one of the most powerful tools in CSS. It lets you create complex, multi-step animations — with full control over timing, repetition, direction, and more. What is an Animation? An animation in CSS is defined by two parts: Unlike transitions (which animate between two states), animations can have many stages and…

This lesson covers six essential animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. Overview of Properties Property Description Default animation-name Name of the @keyframes rule none animation-duration How long one cycle takes 0s animation-timing-function Speed curve ease animation-delay Wait before starting 0s animation-iteration-count How many times to repeat 1 animation-direction Direction of each cycle…

This lesson covers the remaining animation properties: animation-fill-mode, animation-play-state, animation-timeline, and animation-composition. Overview of Properties Property Description Default animation-fill-mode Styles before/after animation none animation-play-state Running or paused running animation-timeline Timeline that controls the animation auto animation-composition How multiple animations combine replace 1. animation-fill-mode Defines the styles applied to an element before and after the animation…