CSS 탐구생활 : 요소 변형하기(transform)

 

Transform이란?

요소의 회전, 기울이기, 크기 조절, 이동효과를 부여할 수 있는 속성

 

 

1. scale

transform의 속성값중 scale(x,y)은 요소의 크기를 x축으로 x배 y축으로 y배 확대 또는 축소시킨다. x,y값에 들어갈 수 있는 것은 0과 양수이다. 1은 원래크기이며 0.5, 2, 2.5등의 숫자로 확대하거나 축소할 수 있다. 만약 x축으로만 확대 및 축소를 해주고 싶다면 scaleX(x)라는 속성을 쓰면 되고 y축으로만 확대 및 축소를 하고 싶다면 scaleY(y)라는 속성을 사용해주면 된다. 

 

 

2. rotate

transform의 속성값중 rotate(angle)은 요소를 angle만큼 회전시킬수 있다. angle은 각도를 적어주어야하는데 deg라는 단위를 사용하고 angle이 양수일 경우 시계방향으로 angle만큼 회전하고  angle이 음수일 경우 반시계방향으로 angle만큼 회전한다.

 

 

3. skew

transform의 속성값 중 skew(x-angle, y-angle)라는 속성값은 요소를 x축 기준 x-angle 만큼 기울이고 y축 기준 y-angle만큼 기울일 수 있다. 이것 또한 양수 또는 음수의 angle을 사용하고 deg라는 단위를 쓴다. 이것도 마찬가지로 x축기준으로 x-angle만큼 기울이고 싶다면 skewX(x-angle)을 쓰면 되고 y축기준 y-angle만큼 기울이고 싶다면 skewY(y-angle)을 쓰면된다. 

 

 

4. translate

transform의 속성값중 translate(x,y)는 요소를 x축으로 x만큼, y축으로 y만큼 이동시키고 싶을 때 사용한다. x,y의 단위는 px,em,%이다. 이것도 또한 translateX(x)라는 속성값과 translateY(y)라는 속성값을 가지고 있다.

 

 

아래 예제는 hover했을 때 1초동안 요소가 변형이 되도록 작성해주었다. 

이 속성값들은 모두 2d transform이고 3d transform 같은 경우는 z축이 추가된다.

See the Pen Untitled by proccm (@proccm) on CodePen.

 

 

// 배경이미지

Photo by Jackson Sophat on Unsplash