The transform property applies 2D or 3D transformations to an element without affecting surrounding layout. Common 2D transform functions include translate, which moves an element along an axis (transform: translate(50px, 0) shifts it 50 pixels right without affecting document flow); rotate, which spins it (transform: rotate(45deg) rotates it 45 degrees clockwise); and scale, which resizes it (transform: scale(1.5) enlarges the element to 1.5 times its size). Other functions include skew and matrix. The point around which transforms are applied is set by transform-origin, which defaults to 50% 50%, the element's center.
The order of transform functions matters because they apply right-to-left. transform: rotate(45deg) translateX(100px) is not the same as translateX(100px) rotate(45deg); the rotated-and-then-translated element ends up in a different position than the translated-and-then-rotated one. This often surprises newcomers building complex motions.
3D transforms use functions such as translate3d, rotateX, rotateY, rotateZ, and perspective to give an element depth. The perspective property sets the distance from the viewer to the z=0 plane, controlling the apparent depth of 3D transforms. There is a difference between perspective applied to a parent and the perspective() transform function applied to an element: perspective on the parent affects all child 3D transforms collectively, while perspective() as a transform function affects only that element. transform-style: preserve-3d makes child elements keep their 3D position relative to each other and the parent instead of being flattened to the 2D plane. backface-visibility controls whether the back side of a 3D-transformed element is visible; setting it to hidden hides the back and is useful for card-flip effects. transform: translateZ(0) is a legacy trick that hints the GPU to promote the element to its own layer, though modern code prefers the will-change property for this.