100 DAYS CSS CHALLENGE #DAY18

everdeer·2025년 7월 6일

100_days_css

100 days CSS challenge

목록 보기

18/22

DAY #18

- 문제

👉 문제 바로가기

Elastic: I thought for a long time about the best way to achieve this effect. In the end, the solution was easier than expected.

이 효과를 낼 수 있는 가장 좋은 방법을 오랫동안 고민했습니다. 결국, 해결책은 예상보다 쉬웠습니다.

저도 오랫동안 고민했습니다...
~~(그렇게 1년이 넘도록 고민 했다고 한다..)~~

문제를 스스로 분석하려다 보니 아무리 고민해봐도 저런 효과를 내는 방법을 모르겠어서...
이 문제부터 내버려 두다가 다시 시작한 김에, 이 문제는 역시 소스를 까보는게 가장 좋은 방법이라 생각해게 돼서 까보게 되었다.

근데 진짜 해결책은 예상보다 쉬워서 웃겼다!

- 내가 작성한 SCSS Code

이번 코드는 사실상 정답 코드를 보고 거의 그대로 적어가며 분석한 것이라
'내가 만든 Code' 라고 적지 않고 '작성한 Code' 라고 했다...ㅎ

일단 결론적으로!! 이 효과를 낼 수 있는 방법부터 설명해보겠다. 생각보다 간단함!

일단 이렇게 반반 배경을 만들어 주고요!
이제 저 경계선이 ✨띠용! 띠용!✨ 하는 부분을 만들어야 합니다!

- 띠용! 띠용!🌌 부분 구현하기

사각형으로 어떻게 저런 모양이 나오나... 하고 굉장히 고민했었는데,
코드를 분석해 보니 사각형으로 만들 수 있는 모양이 아니었다.

그럼 어떻게 만드냐! 바로...
중간에 원을 하나 심고, transform-style: preserve-3d; 속성을 활용해서 앞면이 보이게 눕혔다가~
뒷면이 보이게 반대로 눕혔다가~ 하면서! 눈속임 하고 있는거였다!

그게 뭔소리나면..

이렇게 원이 X축을 기준으로 앞면, 뒷면이 보이도록 움직이고 있는 거였다 ㅋㅋ
(원의 앞면 뒷면을 각각 배경색과 같은색으로 보이게 하여 눈속임 하고 있던것,,,ㅎ)

그래서 원을 만들고 중간에 배치한 다음, 애니메이션만 잘 주면 되었던 것이다 ㅎㅎ

애니메이션은 transform: rotateX(00deg); 을 사용하여 X축으로 돌리는 모션을 주면 된다~

//animation
// 90deg이상: green / 90deg이하: grey
@keyframes elastic {
  0% {
    transform: rotateX(90deg); //납작
  }
  15% {
    transform: rotateX(150deg); //green
  }
  20% {
    transform: rotateX(50deg); //grey
  }
  25% {
    transform: rotateX(120deg); //green
  }
  30% {
    transform: rotateX(70deg); //grey
  }
  35% {
    transform: rotateX(100deg); //green
  }
  40% {
    transform: rotateX(83deg); //grey
  }
  45% {
    transform: rotateX(93deg); //green
  }
  50% {
    transform: rotateX(90deg); //납작
  }

  65% {
    transform: rotateX(30deg); // 반대 grey 180deg - 150deg(15%)
  }
  70% {
    transform: rotateX(130deg); //green  180deg - 50deg(20%)
  }
  75% {
    transform: rotateX(60deg); //grey ...마찬가지
  }
  80% {
    transform: rotateX(110deg); //green
  }
  85% {
    transform: rotateX(80deg); //grey
  }
  90% {
    transform: rotateX(97deg); //green
  }
  95% {
    transform: rotateX(87deg); //grey
  }
  100% {
    transform: rotateX(90deg); //납작
  }
}