17 Transitions & Transforms

1. transition(단축): css 속성의 시작과 끝을 지정(전환효과)하여 중간 값을 애니메이션

   • 개별속성

     • transition-property: 전환 효과를 사용할 속성 이름 (기본값: all)

       • all: 모든 속성에 적용

       • 속성이름: 전환 효과를 사용할 속성 이름

     • transition-duration: 전환 효과의 지속시간 설정 (기본값: 0s)

       • 1s == 1000ms

       • 0.4s == .4s

     • transition-timing-function: 타이밍 함수 지정(ease)

       • ease : 빠르게-느리게 (cubic-bezier(.25,.1,.25,1))

         -linear: 일정하게 (cubic-bezier(0,0,1,1))

       • ease-in: 느리게-빠르게(cubic-bezier(0.42,0,1,1))

       • ease-out: 빠르게-느리게 (cubic-bezier(0,0,0.58,1))

       • ease-in-out: 느리게-빠르게-느리게 (cubic-bezier(0.42,0,.58,1))

       • cubic-bezier(n,n,n,n): 자신만의 값 정의(0~1)

       • steps(n): n번 분할된 에니메이션

     • transition-delay: 전환 효과의 대기시간 설정

       • 시간: 전환 효과의 대기 시간을 설정 (몇s)

2. transform

   • 요소의 변환 효과(변형)를 지정

   • 사용예시

       .box{
           transform: 변환함수1 변환함수2 변환함수3 ...;
           transform: 원근법 이동 크기 회전 기울임
       }

   • 변환 2D 속성

     • translate(x, y): 이동(x축, y축) - 단위: 단위

       • translateX(x)

       • translateY(y)

       • position처럼 배치 후 끝낼 때가 아니라 지속적으로 이동할때 쓰기 좋음

       • position으로 animation을 구성하면 최적화 되지 않은상태

     • scale(x,y): 크기(x축, y축) - 단위: 없음(배수)

       • scaleX(x)

       • scaleY(y)

     • rotate(degree): 회전(각도) - 단위: deg

     • skew(x-deg, y-deg): 기울임 - 단위: deg

       • skewX(x-deg)

       • skewY(y-deg)

     • matrix(n,n,n,n,n,n): 2차원 변환 효과

   • 변환 3D 속성

     • translate3d(x, y,z): 이동(x축, y축, z축) - 단위: 단위

       • translateZ(z)

     • scale3d(x,y,z): 크기(x축, y축, z축) - 단위: 없음(배수)

       • scaleZ(z)

     • rotate3d(x, y, z, a): 회전(x벡터, y벡터, z벡터, 각도) - 단위: deg

       • rotateX(x)

       • rotateY(y)

       • rotateZ(z)

     • perspective(n): 원근법(거리) - 단위

       • 사용시 맨 앞에 선언할 것(안그러면 적용 안되 보임)

     • matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3차원 변환 효과

   • 일반 속성

     • trnasform-origin: 요소 변환 기준점을 설정

       • X축: left, right, center, %, 단위 (기본값: 50%)

       • Y축: top, bottom, center, %, 단위 (기본값: 50%)

       • Z축: 단위 (기본값: 0)

     • transform-style: 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

       • flat: 자식요소의 3D 변환을 사용하지 않음(기본값)

       • preserve-3d: 자식 요소의 3D 변환을 사용함

     • perspective: 하위 요소를 관찰하는 원근 거리를 설정

       • px, em, cm등 단위로 지정

       • 되도록 상위요소에 적용하는게 좋다(관찰 대상의 부모요소)

       • 기준점: perspective-origin

         transform: perspective() 변환함수는 관찰대상에 직접 적용하여 그 대상을 관찰하는 원근 거리 설정! 기준점: transform-origin

     • perspective-origin: 원근 거리의 기준점 설정

       • X축: left, right, center, %, 단위 (기본값: 50%)

       • Y축: top, bottom, center, %, 단위 (기본값: 50%)

     • backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김을 설정

       • visible: 뒷면 숨기지 않음(기본값)

       • hidden: 뒷면 숨김

     • matrix(a,b,c,d,e,f): 요소의 2차원 변환(transform) 효과를 지정

       • scale(), skey(), translate()그리고 rotate()를 지정

         요소에 일반 변환(transforms)함수 (2d, 3d)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다. 2D 변환 함수는 matrix로 3D 변환 함수는 matrix3d로 따라서 일반적인 경우는 matrix 함수가 아닌 일반변환 함수를 사용하면 됩니다.