CSS transforms allow changing the shape and position of elements without affecting surrounding
elements. With 2D transforms, we can move (translate), rotate,
scale (resize), and skew elements. With 3D transforms, we add depth – elements can
be rotated around the X and Y axes, creating realistic spatial effects using the perspective
property.
CSS transitions enable smooth changes between two states of an element – for example, when a
user hovers over a button (:hover). Instead of an abrupt change, the property transitions gradually
over a specified time. Transitions are easy to use and do not require JavaScript knowledge.
CSS animations go a step further: they allow complex sequential style changes defined by
keyframes (@keyframes). With them, we can create movement that repeats, lasts for any
duration, and contains any number of intermediate points. Animations have three key advantages: they are easy to
use, do not require JavaScript, and browsers can optimize them for better performance – even when the tab is in the
background.
| Property/Method | Example | Description |
|---|---|---|
| 2D Transforms | ||
translate(x, y) | transform: translate(50px, 100px); |
Moves an element along the X and Y axes |
translateX(n) | transform: translateX(50px); |
Moves an element along the X axis |
translateY(n) | transform: translateY(100px); |
Moves an element along the Y axis |
rotate(angle) | transform: rotate(45deg); |
Rotates an element by a specified angle |
scale(x, y) | transform: scale(2, 1.5); |
Resizes an element (width, height) |
scaleX(n) | transform: scaleX(2); |
Resizes the width of an element |
scaleY(n) | transform: scaleY(1.5); |
Resizes the height of an element |
skew(x-angle, y-angle) | transform: skew(20deg, 10deg); |
Skews an element along the X and Y axes |
skewX(angle) | transform: skewX(20deg); |
Skews an element along the X axis |
skewY(angle) | transform: skewY(10deg); |
Skews an element along the Y axis |
matrix(n,n,n,n,n,n) | transform: matrix(1,0,0,1,50,100); |
2D transform with 6 values (advanced) |
| 3D Transforms | ||
perspective(n) | perspective: 500px; |
Sets the depth of perspective for 3D effects |
translate3d(x, y, z) | transform: translate3d(50px, 0, 100px); |
Moves an element in 3D space |
translateZ(z) | transform: translateZ(100px); |
Moves an element along the Z axis (depth) |
rotateX(angle) | transform: rotateX(60deg); |
Rotates an element around the X axis (horizontal) |
rotateY(angle) | transform: rotateY(60deg); |
Rotates an element around the Y axis (vertical) |
rotateZ(angle) | transform: rotateZ(45deg); |
Rotates an element around the Z axis (same as 2D rotate) |
rotate3d(x, y, z, angle) | transform: rotate3d(1, 1, 0, 45deg); |
Rotates an element around an arbitrary 3D axis |
scale3d(x, y, z) | transform: scale3d(1.5, 1.5, 2); |
Resizes an element in 3D space |
scaleZ(z) | transform: scaleZ(2); |
Resizes an element along the Z axis |
matrix3d(...) | transform: matrix3d(...); |
3D transform with 16 values (advanced) |
transform-style | transform-style: preserve-3d; |
Maintains 3D space for child elements |
backface-visibility | backface-visibility: hidden; |
Hides or shows the back face of an element |
| Transitions | ||
transition | transition: all 0.3s ease; |
Shorthand property for all transition values |
transition-property | transition-property: transform; |
Sets which property to transition |
transition-duration | transition-duration: 0.5s; |
Sets the duration of the transition |
transition-timing-function | transition-timing-function: ease-in-out; |
Sets the speed curve (ease, linear, ease-in, ease-out, ease-in-out) |
transition-delay | transition-delay: 0.2s; |
Sets the delay before the transition starts |
| Animations | ||
@keyframes | @keyframes name { from {} to {} } |
Defines the keyframes of an animation |
animation | animation: name 2s ease infinite; |
Shorthand property for all animation values |
animation-name | animation-name: move; |
Sets the name of the animation (linked to @keyframes) |
animation-duration | animation-duration: 2s; |
Sets the duration of one animation cycle |
animation-timing-function | animation-timing-function: ease; |
Sets the speed curve of the animation |
animation-delay | animation-delay: 1s; |
Sets the delay before the animation starts |
animation-iteration-count | animation-iteration-count: infinite; |
Sets the number of repetitions (number or infinite) |
animation-direction | animation-direction: alternate; |
Sets the playback direction (normal, reverse, alternate, alternate-reverse) |
animation-fill-mode | animation-fill-mode: forwards; |
Sets the style of the element after the animation ends (none, forwards, backwards, both) |
animation-play-state | animation-play-state: paused; |
Stops or resumes the animation (running, paused) |
