transition : 1s 1초
요소의 전환(시작과 끝)효과를 지정하는 단축 속성
transition: 속성명 지속시간(필수 포함 속성) 타이밍함수 대기시간;
transition-property
전환 효과를 사용할 속성 이름을 지정
ex) width
transition-duration
전환 효과의 지속시간을 지정 (필수 포함 속성)
transition-timing-function
전환 효과의 타이밍(easing)함수를 지정
transition-delay
전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
ex) transition: 1s .5s
지속시간 뒤쪽에 작성 (지속시간, 대기시간)
2D 변환 함수
3D 변환 함수
perspective
하위 요소를 관찰하는 원근 거리를 지정 (속성)
속성과 함수 차이점과 적용 대상
속성 perspective: 600px; 관찰 대상의 부모
함수 transform: perspective(600)px 관찰 대상
backface-visibility
3D 변환으로 회전된 요소의 뒷면 숨김 여부
max-width: 700px;
700px이상으로는 더이상 늘어나지 않고 이하로는 자동으로 줄어들기
margin: 0 auto;
블럭요소에 가로 사이즈가 있는 상태에서 margin 값의 좌우가 auto라면 가운데 정렬 가능
transform: skewX(-14deg) scale(1.3);
transition: 1s;
transform은 변환 속성, transition은 지속시간
요소 하나를 정렬할때는 flex 대신에 margin을 사용
ex) margin: 0 auto;