앞에서 볼 때 턴테이블 판 위의 유리가 움직이는 모습을 시뮬레이션하면서 더 가까워지고 멀어지면서 왼쪽에서 오른쪽으로 수평으로 이동하는 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); } }