왼쪽에서 오른쪽으로 더 가까워지고 멀어지는 CSS 애니메이션으로 턴테이블의 유리 외관의 움직임을 시뮬레이션합니다.

Question

앞에서 볼 때 턴테이블 판 위의 유리가 움직이는 모습을 시뮬레이션하면서 더 가까워지고 멀어지면서 왼쪽에서 오른쪽으로 수평으로 이동하는 CSS 애니메이션을 만들려고 합니다.

가까이 다가가는데 여전히 잘 안 보이는데, 현재는 원이 아닌 다이아몬드 모양을 따라 움직이는 것처럼 보입니다.

이렇게 해봤습니다..

.roll {
  디스플레이: 블록;
  너비: 100px;
  높이: 100px;
  배경: 빨간색;
  여백: 10px 자동 10px 자동;
  애니메이션: 2초 입방베지어(0.42, 0, 0.58, 1) 무한 롤;
}

@keyframes 롤 {
  0%,
  100% {
    변환: 번역X(0%) 스케일(1);
  }
  20% {
    변환: 변환X(50%) 스케일(0.8);
  }
  50% {
    변환: 번역X(0%) 스케일(0.6);
  }
  80% {
    변환: 변환X(-50%) 스케일(0.8);
  }
}

<div class="roll"></div>

Answer 1

수평 원의 정사각형에 애니메이션을 적용하고 뷰어를 향하도록원하는 경우 래퍼 요소에서 3D 변환을 사용하고 사각형에서 반전하여 뷰어를 향하도록 할 수 있습니다.

실제 생활처럼 요소를 Y축으로 회전시키는 것이 포인트입니다.

예는 다음과 같습니다.

으아악 으아악

를 사용해야 한다는 점에 유의하세요. (transform-style:preserve-3d;MDN에 대한 추가 정보)