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 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

  theory
• 2

  2D Transformations. Moving

  To learn how the translate function works and how to use it to move objects on the page

  theory

  quiz

  exercise

• 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

  theory

  quiz

  exercise

• 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.

  theory

  quiz

  exercise

• 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

  theory

  quiz

  exercise

• 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

  theory

  quiz

• 7

  3D transformations. Functions

  Learn 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.