🖥️ 프로젝트?/100일 CSS 챌린지
100일 CSS #3 : 피라미드
뒬탕
2024. 10. 21. 14:47
반응형
문제
https://100dayscss.com/days/3/
The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
피라미드: 이집트의 실제 피라미드만큼 도전적이지는 않지만 그림자 패스는 쉽지 않습니다.
내 풀이
See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.
삼각형
모법답안처럼 path를 이용하여 (clip-path: polygon(30% 100%, 100% 100%, 0% 0%))하지 않고, border를 이용하여 야매로 했다. 그 후 transform에서 skew를 이용하여 변형해줬다.
공전
transform orgin을 이동 후 평행이동, 회전
overflow: hidden 과 clip-path
overflow : hidden을 했음에도 원 밖으로 삐져나온 도형들이 가려지지 않았다. clip-path로 지정하자 그제서야 가려짐. overflow : hidden 때 가려지지 않았던 이유는 아무리 border를 구부려놔도 content box의 크기는 사각형이라 그런 듯 하다.
알게된 점
애니메이션의 transition-timing-function은 각 구간마다 적용되는 것
수정하고픈 것
예시처럼 부드럽게 이어지지 않고 뚝뚝 끊기는 점?
예시 모범답안
See the Pen 003 - The Pyramide by Matthias Martin (@roydigerhund) on CodePen.
반응형