CSS 정리 4

flex-items

flex-order - 숫자가 작을수록 먼저
html 구조를 안 바꿔도, 출력 순서를 바꿀수 있음
flex-grow - 증가 비율, 기본값 0
flex-shrink - 감소 비율, 기본값 1
flex-basis - 요소의 내용 기본 너비, 기본값 auto

전환

transition - 요소 전환효과

transition: width - 가로만 변함
transition: width 1s - 1초동안 가로만 변함
transition: 1s .5s - 0.5초 뒤에 1초동안 변함

변환

transform - 요소 변환효과

transform: 함수1 함수 2 함수3 ..; - 함수로 변환
transform: 원근법 이동 크기 회전 기울임;

2D 변환함수

px단위
translate(x,y) - x, y 축 이동
translateX(x) - x 축 이동
translateY(x) - y 축 이동
숫자단위
scale(x,y) - 크기변화
deg단위
rotate(deg) - 회전
skewX(deg) - x축 기울임
skewY(deg) - y축 기울임

3D 변환함수

deg단위
rotateX(x) - x축 회전
rotateY(y) - y축 회전

trasnform: perspective(500px) rotateY(45deg); - 무조건 perspective를 먼저 해야함

perspective

perspective: 600px; - 대상부모 속성, 기준점을 부모 정가운데로 함
transform:perspective(600px) - 대상 함수, 기준점을 대상 정가운데로 함

backface-visibility

회전된 요소의 뒷면 숨김여부
backface-visibility: visible; 보임
backface-visibility: hidden; 숨김