[CSS] 속성 정리(4) 전환, 변환

🌱전환 transition

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

개별 속성

• transition-property: all (기본값) / 전환 효과 사용할 속성 명시 (ex. width 가로만)
• transition-duration: 0 (기본값) / 지속시간(s) 지정 -> 필수 포함 속성
• transition-timing-function: ease (기본값) / linear 일정하게 / ease-in / ease-out / ease-in-out
• transition-delay: 기본값은 대기 시간 없음 / 대기시간(s) 지정

🌱변환 transform

: 요소에 회전, 크기 조절, 기울기, 이동 효과 부여 가능

2D 변환함수

• transform: 변환함수1 변환함수2 변환함수3 ... (transform 2개 쓰면 아래꺼만 작동함)
• transform: 원근법 이동 크기 회전 기울임 등등
• translate(x, y) x축, y축 지정한 값 만큼 이동, 단위는 px
• translateX(x) translateY(y) x축, y축 개별로 지정해서 이동할 때
• scale(x, y): x축, y축이 커지는 정도. 배수로 진행 ex) scale(1.3, 2)
• rotate(deg): 안에 지정한 deg(degree)만큼 회전
• skew(x, y): 안에 지정한 deg만큼 기울임 ex) transform: skew(20deg, 20deg);
• skewX(x) skewY(y): x축 y축 기준 지정한 deg 만큼 기울임
  

3D 변환함수

• rotateX(x) rotateY(y): x축 y축 기준 회전, z도 있지만 잘 안쓰임
  -perspective(n) 원근법(거리), 단위는 px, 항상 맨 앞에 쓰여야 함
  1. perspective: 600px; 관찰 대상의 부모에 입력 : perspective-origin 부모 요소에 부여하는 속성임
  2. transform: perspective(600px) 관찰 대상은 transform-origin 으로 변환 대상 자체(item)에 부여하는 함수임
• backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김 여부
  visible 뒷면 보임 (기본값) / hidden 뒷면 숨김