전환과 변환 속성

💻 전환 속성

• transition : 요소의 전, 후 효과를 지정하는 단축 속성이다. 가상 클래스 선택자로 요소의 전, 후 상태를 만든다.
  • transition: (속성) (지속시간) (타이밍 함수) (대기시간)
  • 속성 : 특정 한 속성에만 효과를 부여하고 싶을 때 작성한다. 생략하면 모든 속성에 효과를 부여한다.
  • 지속시간, 대기시간 : 효과가 지속되는 시간과 효과가 시작되기까지의 대기시간을 설정한다. 지속시간은 필수 속성 값이다. 시간은 s(초)단위로 표현한다.
  • 타이밍 함수 :
    • ease : 기본 값으로 느리게-빠르게-느리게 순서대로 효과가 진행된다.
    • liner : 일정한 속도로 효과가 진행된다.
    • ease-in : 느리게-빠르게 순서대로 효과가 진행된다.
    • ease-out : 빠르게-느리게 순서대로 효과가 진행된다.
    • ease-in-out : 느리게-빠르게-느리게 순서대로 효과가 진행된다.
  • transition 관련 개별 속성 : transition-property , transition-duration , transition-timing-function , transition-delay

---

💻 변환 속성

• transform : 요소의 상태를 만든다.
  • transform: (변환함수(인자)) (변환함수(인자)) : 값으로 변환함수를 작성한다. 여러개 작성할 수 있으며, 각 변환함수에는 필요한 인자값이 있다.
  • transition 속성을 여러번 작성할 경우, 이전 transition 속성을 덮어쓴다.

👉 2D 변환 함수

translate

• translate(x,y) : 요소를 x, y축 동시에 원하는 만큼 이동 시킨다.
• translateX(x) : 요소를 x축으로 원하는 만큼 이동 시킨다.
• translateY(y) : 요소를 y축으로 원하는 만큼 이동 시킨다.

px단위로 값을 설정한다.

scale

• scale(x,y) : 요소를 x, y축 동시에 원하는 만큼 늘린다.

숫자로 값을 작성한다. 배수를 의미한다.

rotate

• rotate(deg) : 요소를 원하는 만큼 회전시킨다.

각도를 의미하는 deg단위로 값을 작성한다.

skew

• skewX(x) : 요소를 x축을 기준으로 원하는 만큼 기울인다.
• skewY(y) : 요소를 y축을 기준으로 원하는 만큼 기울인다.

각도를 의미하는 deg단위로 값을 작성한다.

👉 3D 변환함수

rotate

• rotateX(x) : 요소를 x축 기준으로 회전시킨다. 원근법이 적용되지 않아 2D 변환함수로 생각할 수 있다.
• rotateY(y) : 요소를 y축 기준으로 회전시킨다. 원근법이 적용되지 않아 2D 변환함수로 생각할 수 있다.

각도를 의미하는 deg단위로 값을 작성한다.

perspective

• perspective(n) : 요소에 원근법을 적용한다.

px단위로 값을 작성하고, transform 속성에 여러 함수와 함께 작성할 때는 항상 맨 앞에 작성하여야 한다.

---

💻 그 외 변환 속성

• perspective : 함수가 아닌 변환 속성 중 하나이다. 이 때는 적용 된 요소의 하위요소를 바라보는 원근 거리를 지정하게 된다.
  • px단위 등으로 값을 설정한다.
• backface-visibility : 3D 변환으로 회전된 요소의 뒷면을 보여줄 지에 대한 여부를 설정한다.
  • backface-visibility: visible : 기본 값으로 뒷면을 보여준다.
  • backface-visibility: hidden : 뒷면을 보여주지 않는다.