CSS Transforms & 3D Effects

Explore CSS transforms for 2D and 3D effects. Learn rotate, scale, skew, translate, and perspective.

2D Transforms

The CSS transform property applies 2D or 3D transformations:

rotate()

scale()

skewX()

translate()

rotate()

Rotate element (positive = clockwise)

transform: rotate(45deg);

scale()

Scale element (1 = original size)

transform: scale(1.5);        /* 统一缩放 */
transform: scale(2, 0.5);    /* X, Y 分别缩放 */
transform: scaleX(2);        /* 仅水平缩放 */

skew()

Skew element

transform: skew(10deg, 5deg);
transform: skewX(10deg);
transform: skewY(5deg);

translate()

Move element

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

transform-origin sets the origin for transformations:

transform-origin: center;      /* 默认 */
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 20px 30px;

Multiple transform functions can be combined:

transform: rotate(45deg) scale(1.5) translate(20px, 20px);

Visually generate transform effects