0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>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. It is a whole new facet for working with pages visuals-wise.</p>
1
<p>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. It is a whole new facet for working with pages visuals-wise.</p>
2
<p>Transformations are a basis for creating animations of all types, from small interface animations to complex multi-stage animations.</p>
2
<p>Transformations are a basis for creating animations of all types, from small interface animations to complex multi-stage animations.</p>
3
<p>As you take the course, you will learn about the following topics:</p>
3
<p>As you take the course, you will learn about the following topics:</p>
4
<ul><li>2D and 3D coordinate systems and how they work in browsers</li>
4
<ul><li>2D and 3D coordinate systems and how they work in browsers</li>
5
<li>Moving, rotating, and distorting objects in a 2D coordinate system</li>
5
<li>Moving, rotating, and distorting objects in a 2D coordinate system</li>
6
<li>Creating 3D objects</li>
6
<li>Creating 3D objects</li>
7
<li>The concept of perspective and point of view on a given object</li>
7
<li>The concept of perspective and point of view on a given object</li>
8
<li>Creating a pseudo-3D effect</li>
8
<li>Creating a pseudo-3D effect</li>
9
<li>Creating the reverse side of a three-dimensional object</li>
9
<li>Creating the reverse side of a three-dimensional object</li>
10
<li>Using matrices in transformation</li>
10
<li>Using matrices in transformation</li>
11
</ul><h2>Practice</h2>
11
</ul><h2>Practice</h2>
12
<p>Many of the lessons in this course will include a practice section with a web view. It is a great idea to do more than the bare minimum. Once you completed a task, try experimenting with the code and the features you learned.</p>
12
<p>Many of the lessons in this course will include a practice section with a web view. It is a great idea to do more than the bare minimum. Once you completed a task, try experimenting with the code and the features you learned.</p>
13
<p>Practice segments here are on screenshot testing. Unlike other courses, this one does not check the values you specify but takes a screenshot of the page with your styles and compares it to the screenshots from the teacher solution. You can easily see how the page should look at different viewport resolutions.</p>
13
<p>Practice segments here are on screenshot testing. Unlike other courses, this one does not check the values you specify but takes a screenshot of the page with your styles and compares it to the screenshots from the teacher solution. You can easily see how the page should look at different viewport resolutions.</p>
14
<p>You can see screenshots of the styles from the teacher solution in the directory __tests__/__image_snapshots__.</p>
14
<p>You can see screenshots of the styles from the teacher solution in the directory __tests__/__image_snapshots__.</p>
15
<p>Practice tasks are checked by comparing screenshots. Each exercise contains a reference solution from which the screenshot comes. After you click the Check button, the tests will automatically take a screenshot of your solution and overlay it on the reference image. The tests give an error if the images differ by more than 7%. There are two kinds of errors:</p>
15
<p>Practice tasks are checked by comparing screenshots. Each exercise contains a reference solution from which the screenshot comes. After you click the Check button, the tests will automatically take a screenshot of your solution and overlay it on the reference image. The tests give an error if the images differ by more than 7%. There are two kinds of errors:</p>
16
<ul><li>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</li>
16
<ul><li>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</li>
17
<li>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%</li>
17
<li>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%</li>
18
</ul><p>If you have one of these errors, the system will automatically generate a screenshot. You can find it in /__tests__/__image_snapshots__/__diff_output__/. You can navigate to this directory using the left panel inside the exercise.</p>
18
</ul><p>If you have one of these errors, the system will automatically generate a screenshot. You can find it in /__tests__/__image_snapshots__/__diff_output__/. You can navigate to this directory using the left panel inside the exercise.</p>
19
<p>The screenshot consists of three parts:</p>
19
<p>The screenshot consists of three parts:</p>
20
<ol><li>On the left is the reference image</li>
20
<ol><li>On the left is the reference image</li>
21
<li>On the right is the image with your solution</li>
21
<li>On the right is the image with your solution</li>
22
<li>The center is the result of the overlay. The areas that don't match are highlighted in red. In time, you'll learn to read the test result more quickly</li>
22
<li>The center is the result of the overlay. The areas that don't match are highlighted in red. In time, you'll learn to read the test result more quickly</li>
23
</ol><p>Look at the spot highlighted in red. It's smaller in the left image than in the right one.</p>
23
</ol><p>Look at the spot highlighted in red. It's smaller in the left image than in the right one.</p>
24
<p>Therefore, when the images were superimposed, there were some differences. This difference affects the position of the other elements. So always move from the top to the bottom of the image. It is possible that fixing one error will fix all the others.</p>
24
<p>Therefore, when the images were superimposed, there were some differences. This difference affects the position of the other elements. So always move from the top to the bottom of the image. It is possible that fixing one error will fix all the others.</p>
25
<h3>CodePen</h3>
25
<h3>CodePen</h3>
26
<p>Another opportunity to apply the skills learned in the course is to use the<a>CodePen</a>service. You can create your own<strong>pen</strong>and experiment with properties.</p>
26
<p>Another opportunity to apply the skills learned in the course is to use the<a>CodePen</a>service. You can create your own<strong>pen</strong>and experiment with properties.</p>
27
<p>Additionally, there are examples loaded from<strong>CodePen</strong>in each lesson. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.</p>
27
<p>Additionally, there are examples loaded from<strong>CodePen</strong>in each lesson. They're available for review, and you can make edits in real-time and monitor the result. Don't miss out on this opportunity.</p>
28
<p>Don't forget to practice. Your content skills will allow you to quickly and skillfully design all the content on a page or app.</p>
28
<p>Don't forget to practice. Your content skills will allow you to quickly and skillfully design all the content on a page or app.</p>