[CSS] CSS3 (3) : 2D / 3D Transform, Transition, Animation

728x90

변형 (Transform)

- transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 바꿀 수 있다

- 제공하는 동작 : 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울이기

> CSS 좌표 체계

- CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단

> 2D 변형 (transform)

- CSS3 2D transform 속성

속성	설명
transform	요소에 2D 또는 3D transform을 적용함
transform-origin	요소에 transform을 적용하는 변환 중심을 설정

- CSS3 2D transform 메소드

메소드	설명
matrix(n,n,n,n,n,n)	모든 2D transform 메소드를 한 번에 설정
translate(x,y)	해당 요소를 주어진 x, y축 거리만큼 이동
translateX(n)	주어진 x축 거리만큼 이동
translateY(n)	주어진 y축 거리만큼 이동
rotate(각도)	주어진 각도만큼 시계/반시계 반향으로 회전
scale(x,y)	주어진 배율만큼 늘리거나 줄임
scaleX(n)	x축 크기를 주어진 배율만큼 늘리거나 줄임
scaleY(n)	y축 크기를 주어진 배율만큼 늘리거나 줄임
skew(x축각도, y축각도)	주어진 각도만큼 각각 x축과 y축 방향으로 기울임
skewX(각도)	주어진 각도만큼 x축 방향으로 기울임
skewY(각도)	주어진 각도만큼 y축 방향으로 기울임

> 3D 변형 (transform)

- CSS3 3D transform 속성

속성	설명
transform	요소에 2D / 3D 변환 적용
tranform-origin	변환을 적용하는 변환 중심 설정
transform-style	변환이 자식(child) 요소들에게도 적용될지 설정
perspective	원근감 표현할 때 사용할 픽셀 수 설정
perspective-origin	원근감 표현할 때 사용할 기준 축 설정
backface-visibility	요소의 앞면만을 표현(뒷면 표현 안함) 여부를 설정

- CSS3 3D transform 메소드

메소드	설명
matrix3d(n x 16)	4x4 행렬을 이용한 16개 매개변수로 모든 3D 변형 메소드 한 번에 설정
rotate3d(x,y,z angle)	주어진 각도만큼 x,y,z축 기준으로 회전
rotateX(angle)	주어진 각도만큼 x축을 기준으로 회전
rotateY(angle)	-
rotateX(angle)	-
translate3d(x,y,z)	현재 위치에서 주어진 x,y,z축의 거리만큼 이동
translateX(x)	주어진 x축의 거리만큼 이동
translateY(y)	-
translateZ(z)	-
scale3d(x,y,z)	주어진 배율만큼 x,y,z축 방향으로 늘리거나 줄임
scaleX(x)	주어진 매율만큼 x축 방향으로 늘리거나 줄임
scaleY(y)	-
scaleZ(z)	-
perspective(n)	3D 요소에 원근감을 표현할 때 사용할 픽셀 수 설정

전환 (transition)

- 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다

- 전환을 위해 제공되는 속성

1. transition 속성

- 추가할 CSS 스타일 전환 효과를 설정 → 전환 효과가 지속될 시간을 설정

- 여러 속성을 동시에 변경할 수도 있다

- (예) 마우스를 올려놓으면 너비, 높이를 변경하는 예제

<style>
    #resize {
        height: 100px;
        width: 150px;
        -webkit-transition: width 1s, height 3s;
        transition: width 1s, height 3s;
    }
    #resize:hover { width: 300px; height: 500px; }
</style>

2. transition-property 속성

- 추가할 전환 효과 설정

3. transition-duration 속성

- 전환 효과가 지속될 시간 설정

4. transition-timing-function 속성

- 전환 효과의 시간당 속도

- 설정할 수 있는 값 : linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

5. transition-delay 속성

- 전환 효과가 나타나기 전까지의 지연 시간 설정

- 전환 효과는 이 메소드의 설정 시간이 지난 후에 비로소 시작된다

Animation

- 요소의 현재 스타일을 다른 스타일로 천천히 변화시킨다

> @keyframes 규칙

- 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다

- @keyframes 규칙안에 CSS 규칙을 설정하여, 해당 요소의 스타일은 특정 시간까지 새로운 스타일로 천천히 변화할 것이다

- 애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용해 요소와 키 프레임을 연결해야 한다

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;
    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

- from 키워드에는 처음 스타일, to 키워드에는 마지막 스타일 명시

- 더 복잡한 애니메이션 효과를 나타내기 위해 from / to 키워드 대신 퍼센트를 사용할 수 있다. 0%에는 처음 스타일, 100%에는 마지막 스타일을 명시한다.

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 4s;
        animation-name: movingPara;
        animation-duration: 4s;
    }
    @-webkit-keyframes movingPara {
        0% { border-color: red; }
        20% { border-color: orange; }
        40% { border-color: yellow; }
        50% { border-color: green; }
        60% { border-color: blue; }
        80% { border-color: navy; }
        100% { border-color: purple; }
    }
</style>

- 재생이 끝난 애니메이션 효과는 맨 처음 스타일로 요소를 되돌려 놓는다

> CSS3 animation 속성

속성	설명
animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정
animation-name	애니메이션 효과 이름 설정
animation-duration	재생할 시간 설정 (기본값 0초)
animation-delay	효과가 나타나기까지의 지연 시간 설정
animation-iteration-count	몇 번 반복될지 설정
animation-direction	진행 방향 설정 ( 속성값 : reverse(반대 방향), alternate(반복될 때마다 반향 변경))
animation-timing-function	시간당 속도를 설정 (속성값 : linear, ease, ease-in, ease-out, cubic-bezier(n,n,n,n)
animation-fill-mode	애니메이션이 재생 중이 아닐 때 스타일을 설정
animation-play-state	애니메이션 효과의 재생 상태를 설정

- 애니메이션 축약 표현 : 모든 애니메이션 속성을 한 줄에 설정

<!-- 문법 -->
div { animation: myShorthand 3s ease-in-out 1s 3 alternate; }

<style>
    div {
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: alternate;
    }
</style>

<!-- 위, 아래 코드는 같은 애니메이션 효과 표현 -->

<style>
    #long {
        -webkit-animation-name: myShorthand;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-direction: reverse;
        animation-name: myShorthand;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: reverse;
    }
    #short {
        -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
        animation: myShorthand 3s ease-in-out 1s 3 reverse;
    }
</style>

[참고] http://tcpschool.com/css/intro