Transform

transition: 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성

animation: @keyframes를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여

         요소의 움직임을 표현

transform:

• 요소에 회전, 크기 조절, 기울기, 이동 효과를 부여(css 시각적 서식 모델의 좌표 공간을 변경)
• 애니메이션 효과 X, 정의된 프로퍼티가 바로 적용되어 화면에 표시

transform: none | transform-function | inital | inherit

transform
none	변함이 없음
inital	이 속성을 기본 값으로 설정
inherit	부모 요소에서 이 속성 상속

transform-function

scale(): 요소의 크기에 영향

  transform: scale(2);

skewX() | skewY(): 요소를 왼쪽 또는 오른쪽으로 기울임

  transform: skewX(20deg);


translate(): 요소를 옆으로 또는 위아래로 이동

  transform: translate(20px);

rotate(): 요소를 시계 방향으로 회전

  transform: rotate(20deg);

matrix(): 모든 변환을 하나로 결합하는 함수

  transform: matrix(1, 2, -1, -1, 80, 80);

perspective(): 하위 요소의 3D 변환에 영향을 미침

 <p>Without perspective:</p>
    <div class="no-perspective-box">
      <div class="face front">A</div>
      <div class="face top">B</div>
      <div class="face left">C</div>
    </div>

    <p>With perspective (9cm):</p>
    <div class="perspective-box-far">
      <div class="face front">A</div>
      <div class="face top">B</div>
      <div class="face left">C</div>
    </div>

    <p>With perspective (4cm):</p>
    <div class="perspective-box-closer">
      <div class="face front">A</div>
      <div class="face top">B</div>
      <div class="face left">C</div>
    </div>

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}