CSS transform Property

Description

The transform property lets you modify the visual presentation of an element by applying geometric operations to its rendering box. These operations can reposition, rotate, scale or otherwise skew the element in two- or three-dimensional space without changing its place in the document flow. Because the change is applied to the element’s rendering rather than to layout, surrounding elements are not reflowed to accommodate the visual change — the element is painted differently, but its layout footprint remains the same.

When a transform is applied the browser typically promotes that element to a composited layer; that affects painting, hit testing and stacking. A transformed element can form a new stacking context, which changes how it and its descendants are stacked and blended with siblings. Pointer events and hit-testing are performed against the element’s transformed shape, so clickable areas move with the visual transformation. Also, transforms are relative to the element’s local coordinate system and can inherit influence from ancestor transforms — nested transforms multiply together, so the order and nesting of transforms matters for the final appearance.

Transforms interact closely with a few other properties that control pivot point, depth and 3D behavior. For example, the element’s rotation and scaling pivot is defined by transform-origin, and three-dimensional views depend on a depth context provided by perspective. When using 3D rotations, whether the reverse face is visible is governed by backface-visibility. For smooth motion you typically combine transforms with transitions or keyframe-driven changes via transition and animation. If you intend to animate transforms frequently, hinting to the browser with will-change can help the user agent prepare compositing resources in advance.

In practice, using transform is a performant way to animate and reposition visual elements because it avoids costly layout recalculations; however, overusing composited layers can increase memory use, so profile when necessary. Keep in mind that transforms change the visual presentation only — they do not alter DOM order or semantic structure, so accessibility tools and keyboard navigation continue to follow the document tree rather than the visual arrangement. Finally, because multiple transform operations are combined, the sequence and context of transformations determine the final result, so plan pivot points and nesting carefully for predictable outcomes.

Definition

Initial value: none
Applies to: Transformable elements
Inherited: No
Computed value: As specified
Animatable: Yes
JavaScript syntax: object.style.transform

Interactive Demo

transform: scale(2);

transform: skew(30deg, 20deg);

transform: rotate(0.5turn);

transform: translate(120px, 50%);

transform: scale(1, 0.5);

transform: matrix(1, 2, 3, 4, 5, 6);

Syntax

transform: none | <transform-list>

Values

matrix(a, b, c, d, e, f)Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f.
matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
rotate(angle)Specifies a 2D rotation by the specified angle about the origin of the element, as defined by the transform-origin property.
rotate3d(x, y, z, a)Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters.
rotateX(ax)Specifies a 3D rotation by the angle specified in the X direction. Equivalent to rotate3d(1, 0, 0, ax).
rotateY(ay)Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to rotate3d(0, 1, 0, ay).
rotateZ(az)Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to rotate3d(0, 0, 1, az).
scale(sx[, sy])Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx.
scale3d(sx, sy, sz)Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.
scaleX(sx)Specifies a scale operation using the vector [sx, 1].
scaleY(sy)Specifies a scale operation using the vector [1, sy].
scaleZ(sz)Specifies a 3D scale operation by the scaling vector [1,1,sz].
skew(ax[, ay])Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero.
skewX(angle)Specifies a 2D skew transformation along the X axis by the given angle.
skewY(angle)Specifies a 2D skew transformation along the Y axis by the given angle.
translate(tx[, ty])Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero.
translate3d(tx, ty, tz)Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions.
translateX(tx)Translates the element by the given amount along the X axis.
translateY(ty)Translates the element by the given amount along the Y axis.
translateZ(tz)Specifies a 3D translation by the vector [0,0,tz] in the Z direction.
perspective(<length>)Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin.
noneSpecifies that no transform should be applied.

Example

HTML

<div class="wrap">

  <h2>CSS Transform examples</h2>

  <div class="grid">

    <div class="card translate">Translate</div>

    <div class="card rotate">Rotate</div>

    <div class="card scale">Scale</div>

    <div class="card skew">Skew</div>

  </div>

  <p class="note">Hover each card to see transform</p>

</div>

CSS

/* Base styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, #f6f9ff 0%, #eef6ff 100%);
  margin: 40px;
  display: flex;
  justify-content: center;
}

/* Container */
.wrap {
  max-width: 760px;
  width: 100%;
  text-align: center;
}

/* Grid of examples */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}

/* Cards */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 12px;
  box-shadow: 0 6px 18px rgba(30, 44, 61, 0.08);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms;
  transform-origin: center;
}

.card:hover {
  box-shadow: 0 18px 30px rgba(30, 44, 61, 0.12);
}

/* Transform examples */
.translate:hover {
  /* move right and up */
  transform: translate(14px, -10px);
}

.rotate:hover {
  /* rotate around center */
  transform: rotate(-12deg);
}

.scale:hover {
  /* scale up slightly */
  transform: scale(1.08);
}

.skew:hover {
  /* skew on the X axis */
  transform: skewX(12deg);
}

.note {
  margin-top: 16px;
  color: #4a5568;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS transform property. Hover over a browser icon to see the version that first introduced support for this CSS property.