CSS: Transform

What is css transform

CSS property 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.

Function: translate

• CSS: translate()

Function: scale, scalex, scaley

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

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

Function: rotate

• rotate(ang)

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

Function: skew

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

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

Example. combine transforms

the transform order applied is right to left.

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

Transform matrix function

you can specify a transform matrix directly.

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

Property 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);
}