course
CSS: Transform (Transform objects)
1 student
Course updated
05 April 2023
Included in the course
7 lessons (video or text)
5 exercises in the IDE
23 quizzes
Assistance in Discussions on the website
Access to other courses of the our platform
What you'll learn
- Rotate, move and distort two-dimensional objects on the page
- Create a pseudo three-dimensional effect using transformations
- Transform flat objects into volumetric ones by adding a new axis for them
- Use Transformations for three-dimensional objects
- Create perspective and control the point of view on the object
- Define a transformation point on an object
Description
This course is about transforming objects on a page using CSS Transforms Module Level 1 and CSS Transforms Module Level 2. Using transforms allows you to create a variety of effects on the page, from small visual changes to creating multi-step complex animations.
Course program
-
1
Introduction
Learn CSS course: Transformations. Learn about the studied topics and their application in practice -
2
2D Transformations. Moving
To learn how the translate function works and how to use it to move objects on the page -
3
2D transformations. Rotation
Learn how to rotate objects using the rotate function. Learn how to select the rotation point of an object using the transform-origin property -
4
2D transformations. Scaling
Learn how to scale HTML elements using the scale function of the transform property. Learn about the effect of a scaled element on its neighbors. -
5
2D transformations. Tilt
Learn about the ability to skew HTML elements using the skew function of the transform property. To understand the principles of element distortion on several axes -
6
3D Transformations. Fundamentals
Learn about the concept of three-dimensional space and how it differs from two-dimensional space. Learn to work with the perspective of three-dimensional objects in CSSquiz
-
7
3D transformations. Functions
Learn to use the previously studied transformations in three-dimensional space. Understand movement, rotation, and scaling along three axesquiz
-
8
Do it yourself
Some additional tasks to help you consolidate the theory you've learned -
9
Additional resources
Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic
Challenges
We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.
#
Challenge
completion rate
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
•
from scratch
under development
Start
at any time