Урок-6. “CSS-переходи: властивості transition & transform”

1.CSS-переходи

Ці чотири властивості керують різними параметрами переходу:

transition-property: <властивість> transition-duration: <час> transition-timing-function: <функція розподілу часу> transition-delay: <затримка>

1-1.Магія за допомогою CSS

2.CSS-переходи (приклад)

☝

3.CSS-переходи (transition-duration​)

Перехід спрацьовує при наведенні курсору на контейнер

500ms
1500ms
3000ms

4.CSS-переходи (transition-timing-function​)

Перехід спрацьовує при наведенні курсору на контейнер

5.CSS-переходи (transition-delay)

✌

6.CSS-переходи (сценарії з transition-delay)

✍

2D-трансформації:

7.Властивість transform - Масштабування

scale(1.25)
scale(1)
scale(0.75)

8.Властивість transform - Поворот

rotate(30deg)
rotate(115deg)
rotate(-45deg)

9.Властивість transform - Зміщення

translateX(50px)
translateY(110px)
translate(-50px, -100px)

10.Центрування елемента

✌

11.Властивість transform - Викривлення

skewX(30deg)
skewY(30deg)
skew(30deg, 30deg)

12.Точка трансформації

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

13.Приклади різних трансформацій

translateX(20px)
translateY(-20px)
translate(-20px, 20px)
scaleX(-1)
scaleY(1.2)
scale(1.2, 0.5)
rotate(720deg)
skewX(20deg)
skewY(-20deg)
skew(-20deg, 20deg)
matrix(1.2,0,0.5,1.2,50,0)

14.Перспектива (базовий приклад)

rotateX(60deg)
rotateY(60deg)

15.Перспектива (з функцією perspective()​)

rotateX(60deg)
rotateY(60deg)

16.Однакова перспектива для групи елементів

0.Заголовок