☀️ transition (전환)

transition : 속성명 지속시간(필수포함) 타이밍함수 대기시간
: 요소의 전환효과를 지정하는 단축속성
🏷 active, hover 같은 속성과 함께 사용한다.

단축 속성을 사용할 때 transition-duration과 transition-delay는 둘 다 시간(s)을 사용하기 때문에 duration을 먼저 작성하고 delay를 그 다음에 작성하는 것을 약속으로 한다.

🌷 transition-property

transition-property : 속성값;
: 전환 효과를 사용할 속성이름을 지정한다.

속성 값

• all : 기본 속성값이다.
• 속성이름 : ex) hetight, width 등등

🌷 transition-duration

transition-dutation : 지속시간(s);
: 전환 효과가 지속될 시간을 지정한다.

속성 값

• 0s : 기본 속성값이다.
• 지속시간(s)

🌷 transition-timing-function

transition-timing-function : 속성값;
: 전환 효과의 타이밍 함수를 지정한다.

속성 값

• ease : 느리게-빠르게-느리게 (기본 속성값이다.)
• linear : 일정하게
• ease-in : 느리게-빠르게
• ease-out : 빠르게-느리게
• ease-in-out : 느리게-빠르게-느리게

🌷 transition-delay

transition-delay : 대기시간(s);
: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정한다.

속성 값

• 0s : 기본 속성값이다.
• 대기시간(s)

---

☀️ transform (변환)

transform : 원근법 이동 크기 회전 기울임;

🌷 2차함수

transform : 2차 함수 속성 값;

( x, y )중 하나만 작성해도 나머지 값은 알아서 비율에 맞춰준다.
ex ) scale ( 1.5 ) = scale ( 1.5 1.5 )

속성 값

px 사용

• translate (x,y) : 이동
• translateX (x) : x축 이동
• translateY (y) : y축 이동

배수 사용

• scale (x,y) : 크기
• scaleX (x) : x축 크기
• scaleY (y) : y축 크기

deg 사용

• rotate (degree) : 회전
• skew (x,y) : 기울임
• skewX (x) : x축 기울임
• skewY (y) : y축 기울임

🌷 3차 함수

transform : 3차 함수 속성 값;

속성 값

px 사용

• translateZ ( z ) : z축 이동
• translate3d ( x, y, z ) : x축, y축, z축 이동
• scaleZ ( z ) : z축 크기
• scale3d ( x, y, z ) : x축, y축, z축 크기
• perspective ( n ) : 원근법 ( 거리 ) 함수

  예제 ) transform : perspective(500px) rotateX(45deg);
  🏷 원근법 함수는 3D 함수 이용할 때 사용하고 제일 앞에 쓴다.
  🏷 회전의 기준은 도형의 정가운데이다.

deg 사용

• rotateX ( x ) : x축 회전
• rotateY ( y ) : y축 회전
• rotateZ ( z ) : z축 회전
• rotate3d ( x, y, z ) : x축, y축, z축 회전

---

☀️ perspective

perspective:단위;
: 하위 요소를 관찰하는 원근 거리를 지정한다.

속성 값

• 단위 : px 등

<perspective 속성과 perspective 함수 차이>

속성 perspective

• 예제 : perspective:600px;
• 적용대상 : 관찰대상 부모에 적용
• 기준점 설정 : perspective-origin

함수 perspective

• 예제 : transform:perspective(600px);
• 적용대상 : 관찰대상에 적용
• 기준점 설정 : transform-origin

---

☀️ background-visibility

: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

속성 값

• visible : 기본 속성값이다.
• hidden : 뒤집었을 때 뒷면이 안 보인다.