왼쪽에서 오른쪽으로 더 가까워지고 멀어지는 CSS 애니메이션으로 턴테이블의 유리 외관의 움직임을 시뮬레이션합니다.
P粉208469050
P粉208469050 2023-09-04 21:59:55
0
1
526
<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>
P粉208469050
P粉208469050

모든 응답(1)
P粉226413256

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

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

예는 다음과 같습니다.

으아악 으아악

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!