CSS transform Property

The transform property applies 2D or 3D modifications to an element, allowing you to rotate, scale, move, or tilt it without affecting the document layout flow.

selector { transform: value; }
none Specifies that no transform should be applied.
matrix(<number>, ...) Defines a 2D transformation using a matrix of six values.
translate(<length-percentage>, <length-percentage>?) Moves the element along the X and Y axes.
scale(<number>, <number>?) Resizes the element by a multiplier on the X and Y axes.
rotate(<angle>) Rotates the element around a fixed point defined by the transform-origin property.
skew(<angle>, <angle>?) Tilts the element along the X and Y axes.
perspective(<length>) Sets the distance between the user and the z=0 plane for 3D effects.

Code Examples

A basic example showing a box that scales up and rotates slightly when the user hovers over it using a CSS transition.

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ff5733;
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.2) rotate(10deg);
}
</style>
<div class="box"></div>

An advanced example using JavaScript to flip a card 180 degrees on the Y-axis every time it is clicked, changing its color simultaneously.

<div id="card" style="width: 200px; height: 200px; background-color: #3498db; transition: transform 0.5s; display: flex; align-items: center; justify-content: center; color: #ffffff; font-family: sans-serif;">CLICK ME</div>

<script>
const card = document.getElementById("card");
let degrees = 0;
card.addEventListener("click", function() {
  degrees += 180;
  this.style.transform = "rotateY(" + degrees + "deg)";
  this.style.backgroundColor = (degrees / 180) % 2 === 0 ? "#3498db" : "#2ecc71";
});
</script>

Pro Tip

You can use the individual transform properties like scale, rotate, and translate independently in modern browsers now, which helps avoid overwriting the entire transform string when you only want to change one aspect in a hover state or animation.

Deep Dive

Think of transform like a projector lens. The original element is still physically sitting in its spot in the DOM (the layout), but the transform property changes where and how the visual image of that element is projected onto the screen. Because the element's actual footprint in the layout doesn't change, the browser doesn't have to recalculate the positions of other elements, making transforms very efficient. The coordinate system starts at the center of the element by default, but you can change that with transform-origin. It creates a new local coordinate system and a new stacking context, meaning z-index might behave differently on transformed items.

Best Practices

Always use transform for animations like moving or resizing elements instead of properties like top, left, width, or height. This allows the browser to use the GPU for hardware acceleration, resulting in 60fps smoothness. If you are using multiple functions, remember that the order matters; rotating then translating is not the same as translating then rotating.

Common Pitfalls

A common mistake is thinking transform moves the element out of its spot in the document flow like relative positioning does; it does not. The space the element originally occupied remains empty. Also, transform can cause text to look slightly blurry in some browsers because it's rendering on a sub-pixel level. Finally, remember that any value other than none creates a new stacking context and containing block for fixed-position descendants.

Accessibility

Transforming an element only changes its visual appearance. Screen readers and other assistive technologies still see the element in its original DOM position. If you use translate to move a button across the screen, a keyboard user might find the focus ring appearing in a location they don't expect. Ensure that visual movement doesn't break the logical flow or usability of interactive components.

Dev Data Table: transform property

default none
animatable yes
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 element.style.transform = "rotate(45deg)";
js_syntax_2 element.style.setProperty("transform", "scale(1.5)");
js_note When using multiple functions in JavaScript, they must be provided as a single space-separated string.
browsers { "Chrome": 36, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 9, "Samsung Internet": "3.0", "Opera Mobile": 23 }
results render here...