What is a transform?
Learn the basics of the transform property.
What is the transform property?
In CSS, the transform property moves, rotates, scales or skews an element from its original place. It does not break the layout flow; the change happens on the painting layer.
So neighbours stay put. Write transform: rotate(8deg) and the element tilts while the text beside it keeps its place. This makes it ideal for hover effects and small animations.
The coordinate system
transform operations happen in the CSS coordinate system. The origin (0, 0) sits at the top-left corner of the element. The X axis grows to the right, the Y axis grows downward.
So translate(20px, 30px) means move the element 20 pixels right and 30 pixels down. Negative values push it left and up.
transform-origin
Every element has a transform centre. The transform-origin property sets this point. The default is the geometric middle: 50% 50%.
Write transform-origin: top left and the rotation pivots from the top-left corner. That matters for a rotating lid or a swinging badge. The same angle feels different.
Exercise Add a transform for the badge
Write a .badge selector and add the declaration transform: rotate(8deg) inside. The badge should rotate eight degrees.
Show example solution
/* add a transform for the badge */
.badge {
transform: rotate(8deg);
}Test yourself
-
Which declaration applies a transform?
/* pick one */- padding: 12px
- display: grid
- transform: rotate(20deg)
- color: navy
Show answer
transform: rotate(20deg) — Correct. The transform property applies a transform to the element; here it rotates 20 degrees.
-
Complete the transform declaration
.box { ____: translate(10px, 20px); }Show answer
.box { transform: translate(10px, 20px); }