CSS3 3D 사례개요
최근 웹애니메이션에 빠져서 학습 과정을 기록해서 여러분과 공유하겠습니다. 최근에 가장 잘한 일을 공유하겠습니다
첫 번째는 HTML 코드입니다.
<p class="camera" id="camera"> <p class="kuai"> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> </p> <p class="kuai"> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> </p> <p class="kuai"> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> </p> <p class="kuai"> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> </p> <p class="kuai"> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> <p class="mian"></p> </p> </p>
여기에서는 3레이어 p HTML 프레임워크가 사용되었으며 수준이 매우 명확합니다.
다음 초점은 CSS 코드, CSS3의 기능을 사용하여 3D 및 스크롤 효과를 구현하여 항상 3D로 보이도록 하는 방법입니다.
요약
간단히 말해서 CSS3를 배우는 과정에서 새로운 기능을 많이 봤고, 어떻게 사용하는지 배웠지만, 제가 말하고 싶은 것은 어떻게 사용하는지에 관계없이 각 코드 줄이 해당 효과를 생성하는 이유도 이해해야 한다는 것입니다. 특히 3D 변환의 경우 3D를 근본적으로 이해해야 합니다. 각 속성 값이 어떤 효과를 가져올 수 있는지 더 잘 파악하기 위해 공간을 활용합니다.