CSS Visual ToolsLesson 79Free preview
Transform Generator
This lesson is part of Web Developer Tools · All levels
Summary
Transform generator helps create translate, rotate, scale, and skew effects on the elements. You can combine some transforms, set the reference dots with the transforms-originals, and see the results right away. The transform does not change the flow of the layout, so the other elements remain in their original position.
Key points
- Translate moving elements without changing the original layout space
- Rotate rotates elements and generally uses units of deg
- Scale magnifying or decreasing elements
- Transform-origin defines the reference point of transformation
- The sequence of transform functions affects the final result
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.