[CSS기초] 9. CSS 전환/변환

9.CSS 전환/변환

9.1. transition

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

 

transition : 2s 3s; transition: 2s ease; //모든 개별속성은 생략가능하지만 duration은 생략이 불가능

 

9.1.1 transition-property

all 모든속성 이며 부분적으로 속성이름을 넣어 선택할수도 있다

ex) transition-property : all; transition-property: width, background

 

9.1.2. transition-duration

*전환효과의 시간으로 소수점도 사용가능 ex) 0.6s

9.1.3 transition-timing

타이밍 함수 사용하는 방법

값	의미	cubic Bezier 값
ease	빠르게-느리게	cubic-bezier(0.25, 0.1, 0.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, 0.58, 1)
cubic-bezier(n,n,n,n)	지정된 값
step(n)	n번 분할된 애니매이션

 

9.2 transform – 요소를 변형시키므로 다양한 함수와 사용이 된다.

*ex) transform : 변환함수1 변환함수2 변환함수3; //다중으로 함수 입력 가능

    transform : translate(10px ,10px) scale(1.5, 1.5) rotate(20deg);

값(변환함수)	의미	단위
translate(x, y)	이동(x축, y축)	단위
translateX(x)	이동(x축)	단위
translateY(y)	이동(y축)	단위
scale(x, y)	크기(x축, y축)	없음(배수)
scaleX(x)	크기(x축)	없음(배수)
scaleY(y)	크기(y축)	없음(배수)
rotate(degree)	회전(각도)	deg
skew(x-deg, y-deg)	기울임(x축 y축)	deg
skewX(x)	기울임(x축)	deg
skewY(y)	기울임(y축)	deg
matrix(n, n, n, n, n, n)	2차원 변환 효과	없음

 

9.3. transform - 3차원 변환함수

값	의미	단위
translate3d(x, y, z)	이동(x, y, z)	단위
translateZ(z)	이동(z)	단위
scale3d(x, y, z)	크기(x, y ,z)	없음(배수)
scaleZ(z)	크기(z)	없음(배수)
rotate(x, y, z, a)	회전(x, y, z, 각도)	없음,deg
rotateX(x)	회전(x)	deg
rotateY(y)	회전(y)	deg
rotateZ(z)	회전(z)	deg
perspective(n)	원근법(거리)	단위
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,)		없음

 

9.3.3 transform 변환속성

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

References: heropy.blog