What is a transform?
- CSS course
- Intermediate
- Lesson 64/98
- 5 min
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.
Practice Add a transform for the badge
Write a .badge selector and add the declaration transform: rotate(8deg) inside. The badge should rotate eight degrees.
Starter code
/* add a transform for the badge */Sample solution
/* add a transform for the badge */
.badge {
transform: rotate(8deg);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which declaration applies a transform?
/* pick one */- padding: 12px
- display: grid
- transform: rotate(20deg) Correct answer
- color: navy
Explanation: The transform property applies a transform to the element; here it rotates 20 degrees.
2 Complete the transform declaration
.box {
____: translate(10px, 20px);
}.box {
transform: translate(10px, 20px);
}Explanation: A transform declaration starts with the transform property; the value is the translate function.