transition, transform

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

1. trasition-property(속성명)

1) 기본 속성 : all
2) 원하는 속성을 기입하여 적용

2. transition-duration(지속시간)

1) 필수로 작성해야함
2) s(second)단위로 작성해야하며 0.5s의 '0.'은 생략하여 .5s로 작성 가능

3. transition-timing-function(타이밍함수)**

1) 보통 ease(느리게-빠르게-느리게), linear(일정하게) 등

4. transition-delay(대기시간)

1) 기본 속성 : 0s
2) 대기시간을 지정해줄 수 있음

참고

- 속성을 여러개 주고 싶을 때 ,(쉼표)를 통해 다르게 적용도 가능하다

div{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transition: 
        width 1s,
        background-color 2s;
    }

transform : 변환함수1 변환함수2 ...;

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

####1. 2D 변환 함수

1) translate(x,y) : 이동

div{
      transform: translate(10px, 10px);
    }

2) scale(x,y) : 크기(단위

div{
      transform: scale(1.5);
    }

3) rotate(degree) : 회전(각도)

div{
      transform: rotate(45deg);
    }

4) skew(x)or(y) : 기울기

• 기울기는 x,y 동시에 작성은 불가하여 1개의 축만 설정해줘야함
• 양수 기울기는 왼쪽으로 기울고(시계방향으로 각도가 들어감), 음수 기울기는 오른쪽으로 기울기가 들어간다.

div{
      transform: skewX(45deg);
    }

5) bacgface-visibility : 뒤집기

2. 3D 변환 함수

1) rotateX(x) or Y(y) : 회전
2. perspective(n): 원근법(거리)

div{
      transform: perspective(300px) rotateX(180deg);
    }

• 원근법 함수 제일 앞에 작성해야 한다.
• perspective를 속성으로 적용할 때와 함수로 넣을 때 차이점!
  "perspective : 600px" --> 부모를 기준으로 움직임
  "transform:perspective(600px)" --> 본인을 기준으로 움직임
  =>부모를 기준으로 회전시키는 것을 추천함