CSS 2D and 3D Transforms

The transform property moves, turns, resizes and tilts an element, in flat 2D or in 3D space, without disturbing the layout around it.

Transform Does Not Move Other Elements

When you transform an element, the browser draws it in a new place, but its original space stays reserved. Neighbours do not move. This is different from changing margin or width, and it is why transforms are smooth and fast to animate.

2D Transform Functions

Function	Example	Effect
`translate(x, y)`	`translate(20px, -10px)`	Moves right 20px and up 10px
`translateX()` / `translateY()`	`translateY(50%)`	Moves on one axis (% is of the element's own size)
`rotate()`	`rotate(30deg)`	Turns clockwise (negative turns anticlockwise)
`scale(x, y)`	`scale(1.5)`	Makes it 1.5 times bigger; `scale(0.5)` halves it
`skew(x, y)`	`skew(15deg)`	Tilts it, like italic text

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.row { display: flex; gap: 40px; padding: 40px; flex-wrap: wrap; }
.box {
  width: 90px;
  height: 90px;
  background-color: #264de4;
  color: white;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.t { transform: translate(10px, 20px); }
.r { transform: rotate(25deg); }
.s { transform: scale(0.7); }
.k { transform: skew(-15deg); }
</style>
</head>
<body>

<div class="row">
  <div class="box">none</div>
  <div class="box t">translate</div>
  <div class="box r">rotate</div>
  <div class="box s">scale</div>
  <div class="box k">skew</div>
</div>

</body>
</html>

Try it Yourself »

Combining Transforms

Put several functions in one transform, separated by spaces. The order matters: they are applied one after another.

Example

css

.a { transform: rotate(45deg) translateX(100px); }
.b { transform: translateX(100px) rotate(45deg); }

These two end in different places. In .a the element turns first, so "X" now points diagonally and it moves diagonally.

A second transform rule replaces the first one completely. If a card has transform: rotate(5deg) and on hover you write transform: scale(1.1), the rotation is lost. Write both on hover: transform: rotate(5deg) scale(1.1).

Individual Transform Properties

Modern CSS solves that problem with three separate properties. They do not overwrite each other.

Example

css

.badge {
  rotate: -8deg;
}
.badge:hover {
  scale: 1.2;     /* the rotation stays */
}

The properties translate, rotate and scale are always applied in that order, and they work in all modern browsers.

transform-origin

By default, an element rotates and scales around its centre. transform-origin moves that point.

Example

css

.door {
  transform-origin: left center;   /* turn like a door on its hinge */
  transform: rotate(-20deg);
}

Values can be keywords (top, left, bottom right), percentages or lengths.

Centring with translate

A classic trick to centre an absolutely positioned element of unknown size:

Example

css

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top and left move its corner to the middle, then translate(-50%, -50%) pulls it back by half its own size.

3D Transforms

3D functions add depth (the Z axis, pointing out of the screen towards you).

Function	Effect
`rotateX(angle)`	Tips forward or back, like a garage door
`rotateY(angle)`	Turns left or right, like a door
`rotateZ(angle)`	Same as a normal 2D `rotate()`
`translateZ(length)`	Moves closer to or further from you

3D only looks real with perspective: the distance between the viewer and the screen. Small values (like 300px) give a strong effect; large values (like 1200px) are gentle. Put perspective on the parent.

A 3D Flip Card

Hover over the card to flip it and see the back.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 30px; }
.scene {
  width: 220px;
  height: 140px;
  perspective: 800px;
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s;
}
.scene:hover .card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: white;
  text-align: center;
  padding: 10px;
}
.front { background-color: #264de4; }
.back {
  background-color: #f97316;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="scene">
  <div class="card">
    <div class="face front">What does CSS stand for?</div>
    <div class="face back">Cascading Style Sheets</div>
  </div>
</div>

</body>
</html>

Try it Yourself »

The important parts:

perspective on .scene gives the 3D depth
transform-style: preserve-3d keeps the two faces in real 3D space
backface-visibility: hidden hides each face when it is turned away
The back face starts already turned 180deg, so it shows the right way round after the flip

Exercise

A box has transform: rotate(10deg). On hover you write transform: scale(1.2). What happens on hover?

It rotates 10deg and scales to 1.2It scales to 1.2 and the rotation is lostNothing changesIt rotates 1.2deg