CSS: Transform (Transform objects)

1 student
Course updated 05 April 2023
Course CSS: Transform (Transform objects)
$49 per month
for all Hexlet's courses
Sign up
  • In-browser editor for exercises
  • Permanent access to theory
  • Asynchronous learning

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


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

Estimated time: 7 hours
  • 1


    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 CSS


  • 7

    3D transformations. Functions

    Learn to use the previously studied transformations in three-dimensional space. Understand movement, rotation, and scaling along three axes


  • 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


We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.

completion rate
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time