course

CSS: Transform (Transform objects)

1 student
Course updated 25 July 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 of 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 effects on the page, from small visual changes to multi-step complex animations.

Course program

Estimated time: 7 hours
  • 1

    Introduction

    Learning about the course's topics and their application in practice
  • 2

    2D Transformations and moving

    Learning how to use the `translate` function to move objects on the page

    quiz

    exercise

  • 3

    2D transformations and rotation

    Learning how to rotate objects and select the rotation point using the transform-origin property

    quiz

    exercise

  • 4

    2D transformations and scaling

    Learn how to scale HTML elements using the scale function of the transform property

    quiz

    exercise

  • 5

    2D transformations and tilt

    Learning about the ability to skew HTML elements and the principles of element distortion on several axes

    quiz

    exercise

  • 6

    3D Transformations fundamentals

    Discovering three-dimensional space and learning to work with the perspective of three-dimensional objects in CSS

    quiz

  • 7

    3D transformations and functions

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

    quiz

  • 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

Recommended program

profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
new
Developing web applications with Django
10 months
from scratch
under development
Start at any time