반응형
최근 웹퍼블리싱을 하다보면 브라우저 크로스브라우징을 IE10이상 하게 되는 경우가 많다보니,
Jquery animation 보다는 CSS animate를 사용하게 되는 경우가 많아졌다.
그리고 특히 CSS animate를 하다보면 transform 속성을 많이 사용하게 될 것이다.
이유는 transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문이다.
그렇다면, transform 속성에 대해 자세히 알아보고, 실무에서 만들었던 파일을 같이 공유하여 이해를 돕도록 하겠다.
Jquery animation 보다는 CSS animate를 사용하게 되는 경우가 많아졌다.
그리고 특히 CSS animate를 하다보면 transform 속성을 많이 사용하게 될 것이다.
이유는 transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문이다.
그렇다면, transform 속성에 대해 자세히 알아보고, 실무에서 만들었던 파일을 같이 공유하여 이해를 돕도록 하겠다.
transform 속성
scale(), rotate(), translate(), skew()
브라우저 | ie IE | chrome 크롬 | firefox 파이어 폭스 | safari 사파리 | opera 오페라 |
---|---|---|---|---|---|
지원현황 | IE10 | 36.0 | 16.0 | 9.0 | 23.0 |
transform:scale() - X 또는 Y축으로 확대/ 축소
scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
사용방법은 아래와 같습니다.
transform:scaleX(x축 비율); // x축으로 확대, 축소 transform:scaleY(y축 비율); // y축으로 확대, 축소 transform:scale(x축 비율, y축 비율); // x축, y축으로 확대, 축소
transform:rotate() - 지정 요소 회전
rotate는 요소를 지정한 각도만큼 회전시킵니다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다.
사용방법은 아래와 같습니다.
transform:rotateX(Ndeg); // x축 기준으로 N도 만큼 회전 transform:rotateY(Ndeg); // y축 기준으로 N도 만큼 회전 transform:rotate(Ndeg); // N도 만큼 회전
transform:translate() - 지정 요소 X 또는 Y축으로 이동
translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다.
사용방법은 아래와 같습니다.
transform:translateX(10px); // X축으로 10px 이동 transform:translateY(10px); // Y축으로 10px 이동 transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동
transform:skew() - 지정 요소 X 또는 Y축으로 기울이기
skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.
사용방법은 아래와 같습니다.
transform:skewX(Ndeg); // x축으로 N도 만큼 기울이기 transform:skewY(Ndeg); // y축으로 N도 만큼 기울이기 transform:skew(x축 Ndeg, y축 Ndeg); // x축, y축으로 N도 만큼 기울이기
transform-origin 속성
위의 transform 속성인 scale(), rotate(), translate(), skew()들을 한번씩 연습해 보았다면, 지정 요소의 중심을 기준으로 동작한다는 것을 알 수 있을 것 입니다.
하지만 transform-origin 을 사용하면 지정 요소의 기준점을 변경할 수 있습니다.
사용방법은 아래와 같습니다
transform-origin:x축 y축; // px, 백분율(%), left, center, right 중에서 사용할 수 있습니다.
transform을 이용한 애니메이션 실무 예제 다운로드(꽃입 떨어지는 효과)
(주)맑은 커뮤니케이션에서 실무로 만든 예제이며, transform 애니메이션을 공부하는 분들에게 도움이 되었으면 합니다.
반응형
'CSS' 카테고리의 다른 글
CSS탐방 - 1.border-image (0) | 2019.01.04 |
---|---|
웹퍼블리셔가 알고있어야 할 display: table 속성! (6) | 2018.08.08 |
마이크로소프트(MS) 엣지(Edge) 브라우저 CSS @import 버그 (0) | 2018.07.30 |
CSS3 - calc() 사용 웹퍼블리싱 (0) | 2017.02.13 |
[CSS3] @font-face(웹 폰트) 웹퍼블리싱 (0) | 2013.03.04 |