속성 - 전환 & 변환

Transitions

CSS 속성의 전환 효과를 지정

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

값	의미	기본값
transition-property	전환 효과를 사용할 속성 이름	all(모든 속성에 적용)
transition-duration	전환 효과의 지속시간 설정	0s(1s=1000ms)
transition-timing-function	타이밍 함수 지정	ease
transition-delay	전환 효과의 대기시간 설정	0s

trainsition-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... ;

transform: 원근법 이동 크기 회전 기울임;

ex) .box{

        transform: rotatate(20deg) translate(10px,0);

}

translate: 이동

scale: 크기(확대, 축소)

rotate:회전

skew: 비틀기

matrix: 4가지 모두 아우름

 

perspective 함수는 transform의 가장 앞에 위치해야함

 

transform 변환 속성

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

transform-origin

x축, y축, z축 : 기본값(50% 50% 0)

0% 0% - 좌측 상단

100% 100% -  우측 하단

 

transform-style

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

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

 

perspective속성과 함수의 차이점

perspective 속성은 관찰 대상의 부모(조상)요소에 적용하여 하위 요소들을 관찰하는 원근거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정합니다.

 

perspective-origin

x축, y축(50% 50%)

y축은 상하 반전되어 있으므로 유이

 

backface-visbility

기본값: visible

hidden

 

matrix(a,b,c,d,e,f)

 

출처. heropy.blog/