CSS: Transform (Transform objects)

Included in the course

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

• 1

  Introduction

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

  theory
• 2

  2D Transformations and moving

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

  theory

  quiz

  exercise

• 3

  2D transformations and rotation

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

  theory

  quiz

  exercise

• 4

  2D transformations and scaling

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

  theory

  quiz

  exercise

• 5

  2D transformations and tilt

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

  theory

  quiz

  exercise

• 6

  3D Transformations fundamentals

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

  theory

  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

  theory

  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.