CSS-трансформации

Сентябрь 6, 2022

Главная
Алгебра
CSS-трансформации

Содержание

2. transform Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций
3. Функции трансформации: translate Сдвигает элемент на заданное значение по горизонтали и вертикали Синтаксис transform: translate(x, y)
4. Функции трансформации: translate: пример body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border:
5. Функции трансформации: translate: пример
6. Функции трансформации: rotate Поворот элемента на заданный угол Синтаксис transform: rotate(угол)
7. Функции трансформации: rotate: пример body{background-color:lightblue;} div { width: 300px; height: 100px; background-color: yellow; border: 1px solid
8. Функции трансформации: rotate: пример
9. Функции трансформации: rotate: пример body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border:
10. Функции трансформации: rotate: пример
11. Функции трансформации: scale Масштаб элемента по горизонтали и вертикали Синтаксис transform: scale(x,y);
12. Функции трансформации: scale: пример body{ background-color:#80CBC4; } div { margin: 150px; width: 200px; height: 100px; background-color:
13. Функции трансформации: scale: пример
14. Функции трансформации: scale: пример body{ background-color:#B2EBF2; } div { width: 200px; height: 100px; background-color: yellow; border:
15. Функции трансформации: scale: пример
16. Функции трансформации: skewX Наклоняет элемент на заданный угол по вертикали Синтаксис transform: skewX(угол)
17. Функции трансформации: skewX: пример body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border:
18. Функции трансформации: skewX: пример
19. Функции трансформации: skewY Наклоняет элемент на заданный угол по горизонтали Синтаксис transform: skew(y-угол)
20. Функции трансформации: skewY: пример body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border:
21. Функции трансформации: skewY: пример
22. Функции трансформации: skew Используется для наклона (искажения) элемента относительно координатных осей Если указано одно значение, второе
23. Функции трансформации: skew: пример body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border:
24. Функции трансформации: skew: пример
25. Домашнее задание div { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; }
27. Скачать презентацию

Слайд 2

transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а

также комбинировать виды трансформаций
Синтаксис
transform: <функция>

Слайд 3

Функции трансформации: translate
Сдвигает элемент на заданное значение по горизонтали и вертикали
Синтаксис
transform: translate(x,

y)

Слайд 4

Функции трансформации: translate: пример

Метод translate() перемещает тэг div вправо на 50 пикселей, и на 100 пикселей вниз.

Слайд 5

Функции трансформации: translate: пример

Слайд 6

Функции трансформации: rotate
Поворот элемента на заданный угол
Синтаксис
transform: rotate(угол)

Слайд 7

Функции трансформации: rotate: пример

Обычный элемент div

Метод rotate() поворачивает элемент div на 20 градусов по часовой стрелке

Слайд 8

Функции трансформации: rotate: пример

Слайд 9

Функции трансформации: rotate: пример

Обычный элемент div

Метод rotate() поворачивает элемент div на 20 градусов против часовой стрелки

Слайд 10

Функции трансформации: rotate: пример

Слайд 11

Функции трансформации: scale
Масштаб элемента по горизонтали и вертикали
Синтаксис
transform: scale(x,y);

Слайд 12

Функции трансформации: scale: пример

Этот элемент увеличен в 2 раза по ширине и в 3 раза по высоте.

Слайд 13

Функции трансформации: scale: пример

Слайд 14

Функции трансформации: scale: пример

This div element is decreased to be half of its original width and height.

Слайд 15

Функции трансформации: scale: пример

Слайд 16

Функции трансформации: skewX
Наклоняет элемент на заданный угол по вертикали
Синтаксис
transform: skewX(угол)

Слайд 17

Функции трансформации: skewX: пример

Обычный div

This div element is skewed 20 degrees along the X-axis.

Слайд 18

Функции трансформации: skewX: пример

Слайд 19

Функции трансформации: skewY
Наклоняет элемент на заданный угол по горизонтали
Синтаксис
transform: skew(y-угол)

Слайд 20

Функции трансформации: skewY: пример

This a normal div element.

This div element is skewed 20 degrees along the Y-axis.

Слайд 21

Функции трансформации: skewY: пример

Слайд 22

Функции трансформации: skew
Используется для наклона (искажения) элемента относительно координатных осей
Если указано одно

значение, второе будет определено браузером автоматически
Синтаксис
transform: skew(x-угол,y-угол)

Слайд 23

Функции трансформации: skew: пример

This a normal div element.

This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.

Слайд 24

Функции трансформации: skew: пример

Слайд 25

Домашнее задание