CSS AdvancedLesson 57Free preview

CSS 2D Transforms

This lesson is part of CSS · All levels

Summary

2D transforms shifts, rotates, magnifies, and tilts elements without changing the layout around them. Functions available include `translate`, `rotate`, `scale`, and `skew`, which can be combined into one property `transform`. The origin of the transformation can be moved by `transform-origin`.

Key points

Sliding the elements horizontally/vertically
Turn the clockwise when positive
`scale(x, y)` enlarging or decreasing; value > 1 enlarging
`transform-origin` determines the center of rotation/scale, default in the center of the element

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.