[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | CSS 속성 (3)

Transform

• 이동
  translate(x,y)
  translateX(x)
  translateY(y)
  
  
• 크기
  scale(x, y) 배수 입력 (중심을 기준으로 크기 변함)
  scaleX(x)
  scaleY(y)
  
  
• 회전
  rotate(deg)
  
  
• 기울임
  skew(x,y) 각도만큼 기울어짐
  skewX(x)
  skewY(y)

---

• 3D 회전
  rotateX(x) x축 기준으로 회전
  rotateY(y) y축 기준으로 회전
  
  
• Backface-visibility
  visible 회전된 요소의 뒷면 보임 (기본값)
  hidden 뒷면 숨김

---

Transition

• transition-property 대상의 속성명
• transition-duration 효과 지속시간
• transition-timing-function 효과 타이밍
  ease: 느 - 빠 - 느
  linear: 일정한 속도로
  ease-in: 느 - 빠
  ease-out: 빠 - 느
  ease-in-out: 느 - 빠 - 느
• transition-delay 대기시간 (몇 초 뒤에 효과 시작할지)
• transition: 속성명 지속시간 타이밍함수 대기시간; 
  : 위 4가지 속성을 한번에 표현 가능

Animation

@keyframes 기능으로 애니메이션 생성 후, 원하는 곳에 해당 애니메이션 변수를 불러와 사용할 수 있다.
위에서 배운 Transition 효과와 동일하게, 지속시간, 효과 타이밍, 대기시간 등을 선택할 수 있다.
animation-name (이름)
animation-duration (지속시간)
animation-delay (지연시간)
animation-iteration-count (반복횟수)
animation-timing-function (반복형태)
animation-direction (애니메이션 방향)