transition에 대해 공부해봤습니다 .
transition이란 ? 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition : 속성명 지속시간 타이밍함수 대기시간
transition-property , transition duration , transition-timing-function , transition-delay
transition-property : 전환 효과를 사용할 속성 이름을 지정
all : 모든 속성에 적용
속성이름 : 전환 효과를 사용할 속성 이름 명시
transition duration : 전환 효과의 지속시간을 지정
0s : 전환 효과 없음
시간: 지속시간(s) 을 지정
transition-timing-function : 전환 효과의 타이밍(easing) 함수를 지정
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) = 자신만의 값을 정의
steps(n) : n번 분할된 애니메이션
이 사이트에서 많은 타이밍 함수들을 찾아볼 수 있습니다 .
보통 저는 transition 사용할때 이렇게 많이 했습니다 .
transition : all 0.5s ease-in
.class:hover {
background-color: red;
}
transform
rotate(45deg). deg : degree( 각도 ) , // 45도 각도로 틀어지게 만듬
scale(1.3) // 1.3배 크기를 늘림
transform : 변환함수1 변환함수2 변환함수3 ...
transform 변환함수 종류 : 원근법 , 이동 , 크기 , 회전 , 기울임
transform 2D 변환 함수
translate( x , y ) : 이동( x축 , y축 )
translate(x) : 이동(x축)
translate(y) : 이동(y축)
scale(x,y) : 이동( x축 , y축 )
rotate(degree) : 회전(각도)
skewX(x) : 기울임(x축)
skewY(y) : 기울임(y축)
matrix(n,n,n,n,n,n) : 2차원 변환 효과
transition 3D 변환 함수
translateZ(z) : 이동(z축)
translate3d(x,y,z) : 이동(x축,y축,z축)
scaleZ(z) : 크기(z축)
scale3d(x,y,z) : 크기(x축,y축,z축)
perspective(n) : 원급법(거리)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : 3차원 변환 효과
rotateX(x) : 회전(x축)
rotateY(y) : 회전(y축)
rotateZ(z) : 회전(z축)
rotate3d(x,y,z,a) : 회전(x축,y축,z축,각도)
perspective : 하위 요소를 관찰하는 원근 거리를 지정 // 단위 : px
perspective 속성과 함수 차이점
속성 : 적용대상이 관찰 대상의 부모
함수 : 적용대상이 관찰 대상
backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
visible : 뒷면 보임
hidden : 뒷면 숨김
네이밍 컨벤션
<HTML CSS>
dash-case ( kebab-case )
the-quick-brwon-fox-jumps-over-the-lazy-dog
컴퓨터는 이 이름을 한단어로 인식 ,사람은 -를 통해 띄어쓰기라는것을 인식함 .
snake_case
the_queck_brown_fox_jumps_over_the_lazy_dog
dash-case와 동일
< JS >
camelCase
theQuickBrownFoxJumpsOverTheLazyDog
첫글자는 소문자 , 그다음부터는 대문자로 시작해서 한단어를 만듬 .
PascalCase
TheQuickBrownFoxJumpsOverTheLazyDog
카멜케이스랑 정말 비슷하지만 첫글자가 대문자로 시작
메소드 체이닝
const a = "Hello~";
const b = a.split().reverse().join(''); //메소드 체이닝..