1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Трансформации с использованием CSS - возможность, пришедшая с появлением стандарта CSS3. Их использование добавило возможность перемещать, вращать, искажать элемент. Причем как в двумерной плоскости, так и в трехмерной. Это совершенно новая грань визуальной работы с объектами на странице.</p>
1
<p>Трансформации с использованием CSS - возможность, пришедшая с появлением стандарта CSS3. Их использование добавило возможность перемещать, вращать, искажать элемент. Причем как в двумерной плоскости, так и в трехмерной. Это совершенно новая грань визуальной работы с объектами на странице.</p>
2
<p>Трансформации - база для создания анимаций любых типов, от небольших анимаций интерфейса, до сложных многоступенчатых анимаций.</p>
2
<p>Трансформации - база для создания анимаций любых типов, от небольших анимаций интерфейса, до сложных многоступенчатых анимаций.</p>
3
<p>В процессе прохождения курса вы познакомитесь со следующими темами:</p>
3
<p>В процессе прохождения курса вы познакомитесь со следующими темами:</p>
4
<ul><li>Двумерные и трехмерные системы координат и их особенности при работе в браузере</li>
4
<ul><li>Двумерные и трехмерные системы координат и их особенности при работе в браузере</li>
5
<li>Перемещение, вращение и искажение объектов в двумерной системе координат</li>
5
<li>Перемещение, вращение и искажение объектов в двумерной системе координат</li>
6
<li>Создание трехмерных объектов</li>
6
<li>Создание трехмерных объектов</li>
7
<li>Понятие перспективы и точки зрения на объект</li>
7
<li>Понятие перспективы и точки зрения на объект</li>
8
<li>Создание псевдотрехмерного эффекта</li>
8
<li>Создание псевдотрехмерного эффекта</li>
9
<li>Создание обратной стороны трехмерного объекта</li>
9
<li>Создание обратной стороны трехмерного объекта</li>
10
<li>Использование матриц при трансформации</li>
10
<li>Использование матриц при трансформации</li>
11
</ul><h2>Практика</h2>
11
</ul><h2>Практика</h2>
12
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
12
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
13
<p>Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идет проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях<em>viewport</em>.</p>
13
<p>Практики в этом курсе построены по системе тестирования скриншотов. В отличие от других курсов, здесь идет проверка не по значениям, которые вы указываете, а делается скриншот страницы с вашими стилями и сравнивается со скриншотами решения учителя. Вы можете легко увидеть, как должна выглядеть страница при разных разрешениях<em>viewport</em>.</p>
14
<p>Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests__/__image_snapshots__.</p>
14
<p>Посмотреть скриншоты со стилями из решения учителя вы можете в директории __tests__/__image_snapshots__.</p>
15
<h2>Проверка практики</h2>
15
<h2>Проверка практики</h2>
16
<p>Практики проверяются методом<em>сравнения скриншотов</em>. Каждое упражнение содержит эталонное решение, с которого снимается скриншот. После нажатия кнопки "Проверить" тесты автоматически снимают скриншот с вашего решения и накладывают его на эталонное изображение. В случае расхождения изображений более, чем на 7%, тесты выдают ошибку. Они могут быть двух видов:</p>
16
<p>Практики проверяются методом<em>сравнения скриншотов</em>. Каждое упражнение содержит эталонное решение, с которого снимается скриншот. После нажатия кнопки "Проверить" тесты автоматически снимают скриншот с вашего решения и накладывают его на эталонное изображение. В случае расхождения изображений более, чем на 7%, тесты выдают ошибку. Они могут быть двух видов:</p>
17
<ul><li>Expected image to be the same size as the snapshot (1280x863), but was different (другие значения). Система говорит вам о том, что размеры изображений не совпадают. Скорее всего есть проблемы в отступах/высоте или межстрочном интервале.</li>
17
<ul><li>Expected image to be the same size as the snapshot (1280x863), but was different (другие значения). Система говорит вам о том, что размеры изображений не совпадают. Скорее всего есть проблемы в отступах/высоте или межстрочном интервале.</li>
18
<li>Expected image to match or be a close match to snapshot but was different from snapshot. По своему размеру скриншоты полностью совпадают, но обнаружились несовпадения между изображениями. Допустимый порог равен 7%.</li>
18
<li>Expected image to match or be a close match to snapshot but was different from snapshot. По своему размеру скриншоты полностью совпадают, но обнаружились несовпадения между изображениями. Допустимый порог равен 7%.</li>
19
</ul><p>Если у вас одна из этих ошибок, то внутри системы автоматически сгенерируется скриншот, который можно найти в директории /__tests__/__image_snapshots__/__diff_output__/. Перейти в эту директорию можно с помощью левой панели внутри упражнения.</p>
19
</ul><p>Если у вас одна из этих ошибок, то внутри системы автоматически сгенерируется скриншот, который можно найти в директории /__tests__/__image_snapshots__/__diff_output__/. Перейти в эту директорию можно с помощью левой панели внутри упражнения.</p>
20
<p>Скриншот состоит из трех частей:</p>
20
<p>Скриншот состоит из трех частей:</p>
21
<ol><li>Слева находится эталонное изображение.</li>
21
<ol><li>Слева находится эталонное изображение.</li>
22
<li>Справа находится изображение, полученное с вашим решением.</li>
22
<li>Справа находится изображение, полученное с вашим решением.</li>
23
-
<li>По центру результат наложения. Красным цветом выделяются области, которые не совпадают. Обращайте на них внимание. Поначалу это может быть сложно, но со временем ��ы научитесь быстрее читать результат теста.</li>
23
+
<li>По центру результат наложения. Красным цветом выделяются области, которые не совпадают. Обращайте на них внимание. Поначалу это может быть сложно, но со временем вы научитесь быстрее читать результат теста.</li>
24
</ol><p>Посмотрите на место, выделенное красным цветом. В левом изображении оно меньше, чем в правом. Поэтому при наложении появились отличия. Это отличие за собой потянет и расположение остальных элементов. Поэтому всегда двигайтесь сверху вниз по изображению. Возможно, что исправление одной ошибки исправит и все остальные.</p>
24
</ol><p>Посмотрите на место, выделенное красным цветом. В левом изображении оно меньше, чем в правом. Поэтому при наложении появились отличия. Это отличие за собой потянет и расположение остальных элементов. Поэтому всегда двигайтесь сверху вниз по изображению. Возможно, что исправление одной ошибки исправит и все остальные.</p>
25
<h3>CodePen</h3>
25
<h3>CodePen</h3>
26
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>, внутри которого экспериментировать со свойствами.</p>
26
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>, внутри которого экспериментировать со свойствами.</p>
27
<p>Также в каждом уроке курса будут представлены примеры, которые подгружаются с<strong>CodePen</strong>. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не упускайте такую возможность.</p>
27
<p>Также в каждом уроке курса будут представлены примеры, которые подгружаются с<strong>CodePen</strong>. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не упускайте такую возможность.</p>
28
<p>Не забывайте постоянно практиковаться, и тогда ваши навыки работы с контентом позволят быстро и грамотно оформлять весь контент страницы или приложения.</p>
28
<p>Не забывайте постоянно практиковаться, и тогда ваши навыки работы с контентом позволят быстро и грамотно оформлять весь контент страницы или приложения.</p>