CSS: Transform

What is CSS transform

CSS transform lets you apply a geometric transformation on HTML element. e.g. translate, rotate, scale.

transform changes the rendering, after all other CSS properties (e.g. margin, padding, width, height, etc.) are calculated.

transform does not effect rest element's layout.

Translate

“translate” in geometry means moving it to a different place.

• translate(x,y)
• translateX(x)
• translateY(y)

value can be percentage.

.x {
 transform: translate(1rem, 0);
}

Scale

• scale(x,y)
• scaleX(x)
• scaleY(y)

.x {
 transform: scale(1, 3);
}

Rotate

• rotate(ang)

.x {
 transform: rotate(10deg);
}

Skew

• skew(ang)
• skewX is same as skew
• skewY(ang)

.x {
 transform: skew(20deg);
}

Combined

the transform order applied is right to left.

.x {
 transform: skew(10deg) scale(1, 0.8) rotate(2deg) translate(1rem, 0);
}

transform matrix

you can specify a transform matrix directly.

/* matrix(a, b, c, d, tx, ty) */
.transform-matrix {
 transform: matrix(1, 0, 0, 1, 50, 50);
 /* identity + translate */
}

transform origin

transform-origin property defines the point around which a transformation is applied.

By default, this origin is set to the center of the element (50% 50%).

You can specify the origin using keywords, percentages, or length values for the X and Y axes, and optionally the Z axis for 3D transforms:

• Keywords: top, right, bottom, left, center.
• Offsets: Percentages (e.g., 50% 50%) or lengths (e.g., 10px 20px).

.x {
 /* top-left corner */
 transform-origin: 0 0;
 transform: rotate(45deg);
}

3D Transform