[transform]검색결과, 1건
CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다
(보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다)
회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다
브라우저별 접두어
Transform 역시 스펙이 완성되지 않은 단계라 각 브라우저별 임시 특성을 이용해야 한다
계속해서 언급하지만 접두어는 다음과 같다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transform
- 파이어폭스: -moz-transform
- 오페라: -o-transform
Rotate (회전 효과)
개체를 주어진 각도로 회전 시킬 수 있다
각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다
참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다
Scale (확대/축소 효과)
개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다
개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다
확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다
그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다
예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대
Skew (기울임 효과)
개체를 주어진 각도로 기울일 수 있다
X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다
X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며
Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다
예) skewX(+-10deg); skewY(+-10deg); skew(+-10deg,+-10deg);
Translate
개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다
translateX , translateY 로 각 축을 따로 지정할 수도 있다
실행 화면은 생략 한다
Transform 과 Transition 의 조화
웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다
즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다
예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다
간단히 코드로 작성해 보면 다음과 같다
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
'모바일 > HTML5' 카테고리의 다른 글
| [HTML5] LocalStorage 와 크로스브라우저 (8) | 2010.09.14 |
|---|---|
| [CSS3] Animation (18) | 2010.09.13 |
| [CSS3] Transition (10) | 2010.09.09 |
| [CSS3] 새로운 스타일 (6) | 2010.09.07 |
| [HTML5] 의미있는 문서, 시맨틱(Semantic) 요소 (4) | 2010.09.06 |
