[CSS] transform 속성을 이용하여 회전, 이동, 크기, 기울기 등 효과 주기

CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있는 transform 속성에 대하여 알아보려합니다.

# CSS transform 알아보기

먼저 transform은 css3 속성으로 선택한 엘리먼트의 크기 및 위치, 회전 등등 다양한 시각적인 조작을 가능하게 해줍니다. 또한 css의 transition 속성과 함께 사용할 경우 다양한 애니메이션 및 인터렉션 구현 역시 가능해집니다. 그럼 간단하게 CSS3의 transform 문법과 실제 적용되는 모습의 코드를 보시죠.

transform: scale(2)


@ 간단한 transform 속성 사용 모습들

 그 아래는 함께 사용될 수 있는 옵션 값들 정보입니다.

! transform에 사용 가능한 옵션과 효과

transform에 사용가능한 옵션은 다양합니다. 아래와 같이 회전, 크기, 이동, 기울이기와 관련된 다양한 동작이 가능합니다.

• rotate // 회전하기
• scale // 크기변경
• translate // 이동
• skew // 기울이기

(matrix // a,b,c,d,x,y를 기준)


간략하게 알아보면...

- transform-origin
; 회전 및 이동의 기준점을 정함

- Default는 50% 50%이며 아래와 같이 변경 가능
; transform-origen: 50% 100% //좌에서 우, 상에서하 까지를 기준으로 정함.

- rotate3d, rotateX, rotateY, rotate, skew, skewX, skewY
; 사용되는 단위는 픽셀(px) 또는 deg 단위를 사용

# transform 사용 예제 보기

코드를 적용하기에 앞서 위 transform은 특정 요소의 위치, 크기 등의 값을 변경할 뿐 시간 지연에 대한 애니메이션을 구현하기 위해서는 반드시 transition과 함께 사용해야 합니다. 즉 해당하는 html 요소에 css를 사용해 다음과 같은 코드를 선언해 줘야합니다.

@ test.html

@ test.css

아래는 다양한 경우의 예제코드입니다.



# 회전 효과 적용하기, rotate 먼저 회전효과를 사용하는 방법입니다.

! 시계 방향으로 90도 회전하는 경우

! X축을 기준으로 90도 회전하는 경우

! Y축을 기준으로 90도 회전하는 경우

! Z축을 기준으로 90도 회전하는 경우

# 크기를 작게 또는 크게 변경하기, scale

이번에는 크기를 조절합니다. 작거나 똔느 크게하는 방법으로 scale을 사용합니다.

! 2배 확대하는 경우

! 가로방향으로 2배 확대하는 경우

! 세로방향으로 2배 확대하는 경우

# 마치면서

위 예제와 같이 익스플로러(IE)나 웹킷 엔진의 사파리, 크롬, 오페라등의 브라우저에서 사용하기 위해서 -ms-, -webkit- 등을 css 속성 앞에 꼭 써주어야 합니다. 이 점 꼭 알아두세요.