Заняття 11
Трансформації
Властивість transform

2D Трансформації

transform: translateX(20px)

transform: translateY(20px)

transform: translate(20px, 20px)

Окрема властивість
translate: 30% 130%

transform: scaleX(1.2)

transform: scaleY(1.2)

transform: scale(1.2)

Окрема властивість
scale: 1.2

transform: rotateX(80deg)

transform: rotateY(80deg)

transform: rotate(80deg)

Окрема властивість
rotate: 80deg

transform: skew(-20deg, 0deg)

transform: skew(0deg, -20deg)

transform: translate(20%, 20%) scale(0.5) rotate(30deg) skew(20deg, 20deg)

transform-origin: 0 0; transform: rotate(20deg)

transform-origin: left top; transform: rotate(20deg)

Крім осі X та Y додається вісь Z. Вісь Z працює лише з perspective

transform: rotateY(180deg)