9-1. CSS 변형 (transform, translate(), scale(), rotate(), skew())

1. transform 

CSS에서 변형을 적용하기 위해서는 transform 속성을 사용해서 함수이름과 함께 작성해야한다. 

transform : 함수 

 

- 2차원 변형과 3차원 변형 

2차원 변형은 웹 요소를 평면에서 변형한다. (수평으로 이동하거나, 수직으로 이동)

3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. 

3차원 변형에서 z축은 앞뒤로 이동하고, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아진다. 

 

2. translate() 함수 

translate() 함수는 웹 요소를 이동시키는 함수이다. 

translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다. 

 

transform : translate(tx, ty) 

transfrom : translate3d(tx, ty, tz)

transform : translateX(tx)

transform : translateY(ty)

transform : translateZ(tz)

x축으로 50px 이동

 

3. scale() 함수 

scale() 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소한다. 

1보다 크면 확대, 1보다 작으면 축소 

 

transform : scale(sx, sy)

transform : scale3d(sx, sy, sz)

transform: sacleX(sx)

transform: scaleY(sy)

transfrom: sacleZ(sz)

0.7배 축소 

 

 

4. rotate() 함수 

rotate() 함수는 2차원 회전과 3차원 회전에서 모두 사용할 수 있다. 

transform : rotate(각도)

이때 각도의 값은 일반적인 각도degree나 래디안 radian을 사용한다. 

 

transform : rotate(rx, ry, 각도)

transform: rotate3d (rx, ry, rz, 각도)

transform: rotateX(각도)

transform: rotateY(각도)

trnasform: rotateZ(각도)

 

 

1️⃣ 2차원 회전

오른쪽으로 40도 회전

2️⃣ 3차원 회전 

x,y,z 축으로 55도 회전

 

5. perspective 속성 

perspective 속성은 입체적으로 보일 수 있도록 깊이값을 지정한다. 

따라서 이 속성을 rotate()함수와 함께 사용하면 원근감을 추가해 회전 형태를 입체적으로 보일 수 있다. 

perspective 속성은 또한 3차원 변형에서 사용한다. 

원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향응로 잡아 당기거나 밀어내어 원근감을 표시한다. 

 

perspective 원근감 추가 

 

6. skew() 함수 

skew() 함수는 지정한 각도만큼 요소를 비틀어 왜곡한다. 

 

transform : skew(x각도, y각도)

transform : skewX(x각도)

transform : skewY(y각도)

x축 기준 30도 비틀기 

skewX() 함수는 각도가 양수면 왼쪽이 올라가고 오른쪽이 내려간다. 

skewY() 함수는 각도가 양수면 오른쪽이 올라가고 왼쪽이 내려간다.