course

CSS: Transform (Transform objects)

1 student
Course updated 17 January 2023
Course CSS: Transform (Transform objects)
$49 per month
for all Hexlet's courses
Sign up
  • Permanent access to theory
  • Asynchronous learning

Included in the course

7 lessons (video or text)
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.

Lessons

Estimated time: 0 hours
  • 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 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

    Additional resources

    Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months