[CSS3] Transform

Transform (개체를 변형시키다)
CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다
(보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다)

회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다

브라우저별 접두어
Transform 역시 스펙이 완성되지 않은 단계라 각 브라우저별 임시 특성을 이용해야 한다
계속해서 언급하지만 접두어는 다음과 같다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transform
- 파이어폭스: -moz-transform
- 오페라: -o-transform

Rotate (회전 효과)
개체를 주어진 각도로 회전 시킬 수 있다
각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다
참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다

-webkit-transform: rotate(45deg);

Scale (확대/축소 효과)
개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다
개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다
확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다

-webkit-transform: scale(1.5);

그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다
예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대

Skew (기울임 효과)
개체를 주어진 각도로 기울일 수 있다
X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다
X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며
Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다

예) skewX(+-10deg); skewY(+-10deg); skew(+-10deg,+-10deg);

-webkit-transform: skew(10deg,10deg);

Translate
개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다

-webkit-transform:translate(10px, 20px);

translateX , translateY 로 각 축을 따로 지정할 수도 있다
실행 화면은 생략 한다


Transform 과 Transition 의 조화
웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다
즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다

예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다

간단히 코드로 작성해 보면 다음과 같다

<style>
img {      
-webkit-transition: -webkit-transform 2s ease-in-out;
}  
img:hover {
 -webkit-transform: skew(10deg,10deg);
}
</style>

이미지에 마우스를 올렸을때 skew효과로 이미지가 기울어지는데 이때, Transition 의 대상 CSS속성이transform으로 지정되어 있기 때문에 기울이는 과정이 2초에 걸쳐 부드럽게 전개되는 것이다.
서서히 움직이는 실행화면을 여기서 보여주기 힘드니 직접 테스트를 해보기 바란다


데모 사이트 소개
Transform 에 대한 효과를 강하게(?) 체험하고 싶다면 다음의 사이트를 방문해 보기 바란다
http://www.westciv.com/tools/3Dtransforms/index.html

Transform 관련 수치와 각도를 직접 설정하면서 각종 변형을 확인 할 수 있어 매우 직관적이다
그리고 이 글에서 주로 설명된 X,Y 축 기반의 2D Transform 외에 Z 축을 기준으로 하는 3D Transform 의 예도 살펴 볼 수 있다. 다만 3D Transform 은 2D에 비해 더 제한적인 브라우저 지원이 있다는 것을 기억하기 바란다. 아래 그림은 이 사이트 화면을 캡쳐한 것이다

그리고 다음의 사이트도 추가로 확인해 보기 바란다
http://cdn.net.tutsplus.com/581_cssTransitions/demos.html
http://css3.bradshawenterprises.com/#how2transitions

참고>
http://www.w3.org/TR/css3-2d-transforms/
https://developer.mozilla.org/en/CSS/-moz-transform
http://www.westciv.com/tools/3Dtransforms/index.html