왼쪽에서 오른쪽으로 더 가까워지고 멀어지는 CSS 애니메이션으로 턴테이블의 유리 외관의 움직임을 시뮬레이션합니다.
P粉208469050
2023-09-04 21:59:55
<p>앞에서 볼 때 턴테이블 판 위의 유리가 움직이는 모습을 시뮬레이션하면서 더 가까워지고 멀어지면서 왼쪽에서 오른쪽으로 수평으로 이동하는 CSS 애니메이션을 만들려고 합니다. </p>
<p>가까이 다가가는데 여전히 잘 안 보이는데, 현재는 원이 아닌 다이아몬드 모양을 따라 움직이는 것처럼 보입니다. </p>
<p>이렇게 해봤습니다..</p>
<p>
<pre class="brush:css;toolbar:false;">.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);
}
}</pre>
<pre class="brush:html;toolbar:false;"><div class="roll"></div></pre>
</p>
수평 원의 정사각형에 애니메이션을 적용하고 뷰어를 향하도록원하는 경우 래퍼 요소에서 3D 변환을 사용하고 사각형에서 반전하여 뷰어를 향하도록 할 수 있습니다.
실제 생활처럼 요소를 Y축으로 회전시키는 것이 포인트입니다.예는 다음과 같습니다.
를 사용해야 한다는 점에 유의하세요. (
transform-style:preserve-3d;
MDN에 대한 추가 정보)