[CSS]속성-전환, 변환

- transition

 CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션

transition-property	전환 효과를 사용할 속성 이름	기본값: all
transition-duration	전환 효과의 지속시간 설정	기본값: 0s
transition-timing-function	타이밍 함수 지정	기본값: ease
transition-delay	전환 효과의 대기시간 설정	기본값: 0s

 

 단축

 transition: duration delay;

 

hover

 

- transition-timing-function

ease	빠르게-느리게
linear	일정하게
ease-in	느리게-빠르게
ease-out	빠르게 느리게
ease-in-out	느리게-빠르게-느리게
cubic-bezier(n,n,n,n)	자신만의 값을 정의(0~1)
steps(n)	n번 분할된 애니메이션

 

---

- transform

 요소의 변환 효과를 지정

 사용법 

 transform: 변환함수1 변환함수2 변환함수3;

 

- 2D 변환함수

translate(x, y)	이동(x축, y축)
translateX(x)	이동(x축)
translateY(y)	이동(y축)
scale(x, y)	크기(x축, y축)
scaleX(x)	크기(x축)
scaleY(y)	크기(y축)
rotate(degree)	회전(각도)
skew(x-deg, y-deg)	기울임(x축, y축)
skewX(x-deg)	기울임(x축)
skewY(y-deg)	기울임(y축)
matrix(n,n,n,n,n,n)	2차원 변환 효과(n 6개)

 효과를 적용할 때 position을 이용해서 이동이 가능하기는 하다. 하지만 transform을 사용하여 위치를 지정해주는 것이 좋은 방법이다.

 

 

- 3D 변환함수

translate3d(x, y, z)	이동(x축, y축, z축)
translateZ(z)	이동(z축)
scale3d(x, y, z)	크기(x축, y축, z축)
scaleZ(z)	크기(z축)
rotate3d(x, y, z, a)	회전(x벡터, y벡터, z벡터, 각도)
rotateX(x)	회전(x축)
rotateY(y)	회전(y축)
rotateZ(z)	회전(z축)
perspective(n)	원근법(거리)  // 적용 시 가장 앞에 선언되어야 한다.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3차원 변환 효과 (n 16개)

 

- transform 변환속성

transform-origin	요소 변환의 기준점을 설정
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3D 변환으로 회전된 요소의 뒷면 숨김을 설정

 

- transform-origin

x축	left, right, center, %, 단위	기본값: 50%
y축	top, bottom, center, %, 단위	기본값: 50%
z축	단위	기본값: 0

 

- transform-style

flat	자식 요소의 3D 변환을 사용하지 않음	기본값: flat
preserve-3d	자식 요소의 3D 변환을 사용함

 

 

 

 

 

 

 

#패스트캠퍼스