transform
- 변형 시킨다는 의미
- 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다.
transform 의 속성값
translate(x,y)
scale(x,y)
skew(x-angle, y-angle)
rotate(angle)
translate(x,y)
요소의 좌표를 움직일 수 있다.
x축으로 x축만큼 , y축으로 y축만큼
translateX(n), translateY(n)
: 요소의 X축 또느 Y축 좌표를 n만큼 움직일 수 있다.
transform : translateY(20px)
scale(x,y)
X축으로 x만큼, Y축으로 y만큼 요소를 축소 혹은 확대한다.
transform : scale(0.75, 1.1)
skew(x, y)
X축으로 x도 만큼, Y축으로 y도 만큼, 요소를 기울인다.
transform: skew(15deg, 10deg)
rotate(n)
요소를 n만큼 회전시킨다.
transform : rotate(45deg)
transform 중첩 적용
transform 속성은 속성을 중첩 적용 할 수 있다.
❓요소를 x축 방향으로 30도, y축 방향으로 10도 기울이고 45도 회전 시키려면?
transform : skew(30deg, 10deg) rotate(45deg)
❓요소를 y축 방향으로 0.75 축소시키고 x축 방향으로 20도 기울이려면?
transform : scaleY(0.75) skewX(20deg)
absolutely love this part