Содержание
- 2. 2D
- 3. Отдельное свойство CSS, которое мы ещё не рассматривали. Трансформация преобразует существующий HTML элемент на основе одной
- 4. Сдвигает элемент на определенное расстояние по двум осям. Значение задается в px и в %. Проценты
- 5. Сдвиг только по осям X и Y соответственно. Значения аналогичны translate
- 6. Масштабирование элементов по осям x и y. Значения задаются в долях. При указании только одного значения
- 7. Поворачивает элемент на определенный угол по часовой стрелке. Угол задаётся в градусах, с помощью deg Отрицательные
- 8. Наклоняет элемент на угол вдоль двух осей. Значения указываются в градусах (deg). Указание одного значения наклонит
- 9. Комбинирование всех способов. matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) Все значения задаются в долях,
- 10. Изменение центра трансформации. Задаётся значениями в процентах или пикселях (сначала по X, потом по Y), либо
- 11. Функции трансформации можно перечислять через пробел в порядке появления.
- 12. 3D
- 13. Свойство, которое указывается в какой плоскости будут происходить трансформации. Значение flat означает плоские, двумерные трансформации, а
- 14. Включает перспективу для дочерних элементов, добавляя ощущение 3-мерного пространства. .container { perspective: 200px; transform-style: preserve-3d; }
- 15. Устанавливает точку перспективы. По умолчанию точка находится в центре, значения можно установить аналогичным образом, как и
- 17. Сдвиг по 3 осям. Существуют отдельные функции translateX, translateY, translateZ
- 18. Масштабирование по 3 осям. Аналогично есть отдельные функции масштабирования по каждой оси scaleX, scaleY, scaleZ
- 19. Поворот на угол по вектору, заданному тремя точками. Точки задаются в долях. Для поворота по отдельным
- 20. Добавление перспективы для одного элемента.
- 21. Отображения обратной части. По умолчанию отображается как зеркальное отражение поверхности, но со значением hidden обратная часть
- 23. Скачать презентацию