[CSS] 전환(transition), 변환(transform)-2차원,3차원

전환

transition : 속성명 지속시간 타이밍함수 대기시간;

; 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

- 지속시간은 단축형 작성 시 필수 속성 !

속성명(transition-property) ; 전환 효과를 사용할 속성 이름을 지정. all(모든 속성에 적용, 기본 값), 속성이름

지속시간(transition-duration) ; 전호나 효과의 지속시간을 지정. 0s(전환 효과 없음), 시간(단위 s)

타이밍함수(transition-timing-function) ; 전환 효과의 타이밍(Easing)함수를 지정.

ease ; 느리게-빠르게-느리게 / linear ; 일정하게 / ease-in ; 느리게-빠르게 / ease-out ; 빠르게-느리게 / ease-int-out ; 느리게-빠르게-느리게

대기시간(transition-delay) ; 전환효과가 몇초 뒤에 시작할지 대기시간을 지정. 0s(대기시간 없음), 시간

ex) transition : width 1s linear 0.5s ; 0.5대기시간을 가지며, 1초동안, 일정한 속도로, 너비가 변함

 

 

변환

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

transfrom : (원근법 이동) (크기) (회전) (기울임) ;

2차원 변환 함수

translate(x,y) ; 이동(x축,y축.단위는 px) / translateX(x) ; 이동(x축) / translateY(y) ; 이동(y축) / scale(x,y) ; 크기(x축,y축. 단위는 없음(배수))

rotate(degree) ; 회전(각도.단위는 deg) / skewX(x) ; 기울임(x축.단위는 deg) / skewY(y) ; 기울임(y축)

3차원 변환 함수

rotateX(x) ; x축(가로축) 기준으로 회전 / rotateY(y) ; y축(세로축) 기준으로 회전 / perspective(n) ; 원근법(거리.함수가 여러 개라면 제일 앞에 있어야함)

ex) transform : perspective(500px) rotateY(45deg) ; y축을 기준으로 45도 회전하고, 500px멀리서 봄

 

 

perspective속성과 함수

속성 ; perspective:600px, 적용대상 ; 관찰 대상의 부모

함수 ; transform:perspective(600px), 적용대상 ; 관찰 대상

 

 

backface-visibility ; 3D 변환으로 회전된 요소의 뒷면 숨김 여부. visible(뒷면 보임,기본값), hidden(뒷면 숨김)