Слайд 3Отдельное свойство CSS, которое мы ещё не рассматривали. Трансформация преобразует существующий HTML
![Отдельное свойство CSS, которое мы ещё не рассматривали. Трансформация преобразует существующий HTML](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-2.jpg)
элемент на основе одной или нескольких выбранных функций. Трансформации бывают 2D и 3D.
Для применения трансформации используется свойство transform.
Применение трансформаций не влияет на поток.
Слайд 4Сдвигает элемент на определенное расстояние по двум осям.
Значение задается в px и
![Сдвигает элемент на определенное расстояние по двум осям. Значение задается в px](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-3.jpg)
в %. Проценты рассчитываются по размерам блока.
Если указывать только одно значение, сдвиг будет по оси x.
Отрицательные значения сдвинут в обратную сторону
transform: translate(-50%, 20px)
Слайд 5Сдвиг только по осям X и Y соответственно.
Значения аналогичны translate
![Сдвиг только по осям X и Y соответственно. Значения аналогичны translate](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-4.jpg)
Слайд 6Масштабирование элементов по осям x и y.
Значения задаются в долях.
При указании только
![Масштабирование элементов по осям x и y. Значения задаются в долях. При](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-5.jpg)
одного значения коэффициент масштабирования применяется ко всем осям целиком.
Доступны функции scaleX и scaleY для масштабирования только по одной оси.
Отрицательные значения отразят элемент зеркально.
transform: scale(-1.5, 0.5)
Слайд 7Поворачивает элемент на определенный угол по часовой стрелке. Угол задаётся в градусах,
![Поворачивает элемент на определенный угол по часовой стрелке. Угол задаётся в градусах,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-6.jpg)
с помощью deg
Отрицательные значения повернут элемент против часовой стрелки.
transform: rotate(-20deg)
Слайд 8Наклоняет элемент на угол вдоль двух осей. Значения указываются в градусах (deg).
![Наклоняет элемент на угол вдоль двух осей. Значения указываются в градусах (deg).](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-7.jpg)
Указание одного значения наклонит элемент вдоль оси X.
skewX и skewY наклонят элемент вдоль конкретной оси.
transform: skew(-20deg, -20deg)
Слайд 9Комбинирование всех способов.
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
Все значения задаются
![Комбинирование всех способов. matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) Все](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-8.jpg)
в долях, tx и ty. Для последних двух единицы измерения не указываются.
transform: matrix(1, 0, 0, 1, -100, 0);
Слайд 10Изменение центра трансформации.
Задаётся значениями в процентах или пикселях (сначала по X, потом
![Изменение центра трансформации. Задаётся значениями в процентах или пикселях (сначала по X,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-9.jpg)
по Y), либо ключевыми словами top, bottom, left, right, center.
transform-origin: 200px 100px;
Слайд 11Функции трансформации можно перечислять через пробел в порядке появления.
![Функции трансформации можно перечислять через пробел в порядке появления.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-10.jpg)
Слайд 13Свойство, которое указывается в какой плоскости будут происходить трансформации. Значение flat означает
![Свойство, которое указывается в какой плоскости будут происходить трансформации. Значение flat означает](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-12.jpg)
плоские, двумерные трансформации, а значение preserve-3d включит трехмерную трансформацию
transform-style: preserve-3d;
Свойство устанавливается для родительского элемента!
Важное замечание: некоторые из свойств (overflow и opacity, например) в значениях, отличных от значения по умолчанию, предотвращают трехмерную трансформацию.
Слайд 14Включает перспективу для дочерних элементов, добавляя ощущение 3-мерного пространства.
.container {
perspective: 200px;
![Включает перспективу для дочерних элементов, добавляя ощущение 3-мерного пространства. .container { perspective:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-13.jpg)
transform-style: preserve-3d;
}
Свойство устанавливается для родительского элемента!
Слайд 15Устанавливает точку перспективы. По умолчанию точка находится в центре, значения можно установить
![Устанавливает точку перспективы. По умолчанию точка находится в центре, значения можно установить](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-14.jpg)
аналогичным образом, как и в background-position.
perspective-origin: 0% 100%;
Слайд 17Сдвиг по 3 осям.
Существуют отдельные функции translateX, translateY, translateZ
![Сдвиг по 3 осям. Существуют отдельные функции translateX, translateY, translateZ](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-16.jpg)
Слайд 18Масштабирование по 3 осям.
Аналогично есть отдельные функции масштабирования по каждой оси scaleX,
![Масштабирование по 3 осям. Аналогично есть отдельные функции масштабирования по каждой оси scaleX, scaleY, scaleZ](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-17.jpg)
scaleY, scaleZ
Слайд 19Поворот на угол по вектору, заданному тремя точками. Точки задаются в долях.
Для
![Поворот на угол по вектору, заданному тремя точками. Точки задаются в долях.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-18.jpg)
поворота по отдельным осям есть функции rotateX, rotateY, rotateZ.
Слайд 20Добавление перспективы для одного элемента.
![Добавление перспективы для одного элемента.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-19.jpg)
Слайд 21Отображения обратной части. По умолчанию отображается как зеркальное отражение поверхности, но со
![Отображения обратной части. По умолчанию отображается как зеркальное отражение поверхности, но со](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/869072/slide-20.jpg)
значением hidden обратная часть скрывается.