[CSS] 전환과 변환

전환

요소의 전환 효과를 지정하는 속성 (transition)

▶ 속성 목록 4가지

1. transition-property : 전환 효과가 일어난 CSS속성 이름 명시

transition-property: value;

value

• all : transition 효과 적용 가능한 속성에 전부 적용
• width, height, background-color 등이 있음(ex. background-color 3s, width 5s <여러 값을 입력이 가능함>)

2. transition-duration : 전환 효과가 일어날 시간 명시

transition-duration: value;

value

• 0s : 시간이 없다.
• 시간 : 소수점 작성 시, 0 생략 가능 (0.5 → .5)

3. transition-timing-function : 타이밍 함수(Easing)를 지정

transition-timing-function: value;

value

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

※ transition의 값이 3개 있을 때, 첫 번째 값은 property, 두 번째 값은 duration, 세 번째 값은 timing-function이다.

transition: width 1s ease;

 

4. transition-delay : 대기 시간

transition-delay: value;

value

• 0s : 대기시간이 없다.
• 시간 : 대기 시간(s)을 입력한다.

※ transision에 시간이 2개 있으면, 앞 시간은 duration, 뒷 시간은 delay

transition: 1s 2s;

 

---

변환

요소의 변환하는 속성 (transform)

변환 함수를 사용해서 요소를 회전 / 이동 / 기울임 등 변환 효과를 줄 수 있습니다.

- 단위 : deg(degree / 각도)

▶ 2D 변환 함수

1. transrate(x, y) : 이동(x, y)

transform: transrate(x, y);

2. transrateX(x) : 이동(x)

transform: transrateX(x);

3. transrateY(y) : 이동(y)

transform: transrateY(y);

4. scale(x, y) : 크기 키우기, 값을 하나만 사용하는 것이 좋다.(두 축 모두 적용)

transform: scale(x or y);

5. rotate(deg) : 입력 각도에 따라 회전 시킴

transform: rotate(10deg);

 

▶ 3D 변환 함수

1. perspective() : 원근법(거리), 단위 px

• 사용 시, 다른 함수들 보다 앞에 위치해야 한다.

※ perspective 속성과 perspective()의 차이

• perspective 속성 : 관찰 대상(변환할 요소)의 부모 요소에 직접 적용
• perspective() : 관찰 대상(변환할 요소)에 직접 적용

2. rotateX(x) : 회전 (x축)

3. rotateY(y) : 회전 (y축)

 

- perspective() 경우

transform: perspective(100px) rotateX(10deg);

- perspective 속성 경우

.box {
  perspective: 100px;
}

.box .item {
  transform: rotateY(45deg);
}

4. backface-visibility : 요소의 뒤쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility: value;

value

• visible : 뒷면이 보이도록 한다.
• hidden : 뒷면을 숨김다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.