Lpla 개발 블로그

HTML&CSS

[CSS] 공전하는 애니메이션 효과 (transform: rotate)

기본세팅 HTML 1 2 3 4 5 SCSS .outer { width: 20rem; height: 20rem; position: relative; border: 2px solid #426190; border-radius: 50%; margin: 25% auto; } .satellite_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .satellite_box { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; animation: forwardRotate 8s linear infinite; text-align: center; line-height:..

HTML&CSS

[CSS] 3D 카드 효과(transform, perspective)

사이트를 제작하면서 한 가지 난관에 부딪혔다. 첫번째 움짤과 같이 트랜스폼(Transform)으로 3D 카드 효과를 만들려고 했다. 하지만 두번째 움짤처럼 3D 효과가 적용되지 않고 평면적으로 카드가 넘어가버렸다. 여기에 적용된 코드는 아래와 같다. FAKER FAKER SANGHYEOK LEE - 미드MAY 7, 1996 - SOUTH KOREA 자기소개 FAKER IS ONE OF JUST TWO PLAYERS, ALONG WITH HIS FORMER TEAMMATE BENGI, TO HAVE WON THE LEAGUE OF LEGENDS WORLD CHAMPIONSHIP THREE TIMES. body { background-color: #000; margin-top: 100px; } .team_p..