Register to get access to free programming courses with interactive exercises

Introduction CSS: Transform (Transform objects)

Transformations using CSS are a feature that came with the arrival of the CSS3 standard. Using them allows you to move, rotate, and distort elements. Both in 2D and 3D. This is a whole new facet for working with elements on pages, visuals wise.

Transformations are a basis for creating animations of all types, from small interface animations, to complex multi-stage animations.

As you take the course, you'll learn about the following topics:

  • 2D and 3D coordinate systems and how they work in browsers
  • Moving, rotating, and distorting objects in a 2D coordinate system
  • Creating 3D objects
  • The concept of perspective and point of view on a given object
  • Creating a pseudo 3D effect
  • Creating the reverse side of a three-dimensional object
  • Using matrices in transformation

Practice

Many of the lessons in this course will include a practice section with web view. It's a good idea to do more than just complete the task. Once you've completed the task successfully, try experimenting with the code and the features you've learned.

Practice segments in this course are built around screenshot testing. Unlike other courses, this one doesn't check against the values you specify, but rather takes a screenshot of the page with your styles and compares it to the screenshots from the teacher's solution. You can easily see how the page should look at different viewport resolutions.

You can see screenshots of the styles from the teacher's solution in the directory __tests_/_image_snapshots__.

Practice

Practise tasks are checked by comparing screenshots. Each exercise contains a reference solution, which is where the screenshot comes from. After you click the “Check” button, the tests will automatically take a screenshot of your solution and overlay it on the reference image. If the images differ by more than 7%, the tests give an error. There are two kinds of errors:

  • Expected the image to be the same size as the snapshot (1280x863), but it was different. The system tells you that the image sizes do not match. Most likely, there's a problem with the indentation/height or line spacing.
  • Expected image to match or be a close match to snapshot but was different from snapshot. The screenshots are the same size, but there are inconsistencies between the images. The permissible threshold is 7%.

If you have one of these errors, a screenshot will automatically be generated inside the system and can be found in /__tests__/__image_snapshots__/__diff_output__/. You can navigate to this directory using the left panel inside the exercise.

The screenshot consists of three parts:

  1. On the left is the reference image.
  2. On the right is the image with your solution.
  3. The center is the result of the overlay. The areas that don't match are highlighted in red. Take a good look at them. It may be difficult at first, but in time, you'll learn to read the test result more quickly.

Testing by screenshots

Look at the spot highlighted in red. It's smaller in the left image than in the right one. Therefore, when the images were superimposed, there were some clear differences. This difference affects the position of the other elements. So always move from the top to the bottom of the image. It's possible that fixing one error will fix all the others.

CodePen

Another opportunity to apply the skills learned in the course is to use the CodePen service. You can create your own pen, where you can experiment with properties.

Additionally, there'll be examples that are loaded from CodePen in each lesson of the course. They're available for review, and you can make edits in real time and monitor the result. Don't miss out on this opportunity.

Don't forget to practice all the time, that way your content skills will allow you to quickly and skillfully design all the content on a page or app.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
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

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.