See the Pen slot machine by eunhye Park (@kurepark) on CodePen.
회사에서 사용해야할 일이 생겨서 만든 css slot machine 애니메이션.
해당 동작이 css로 가능할지 문의를 주셔서 실제 업무를 하기 전에 테스트로 만들어보았다.
만들기전에 대략 이런식으로 만들면 되겠지 싶었는데, 잘 안만들어져서 결국 구글의 힘을 빌렸다. 슬롯머신처럼 동작하지만 슬롯머신 디자인으로 사용할건 아니기에 불필요한 것은 만들지 않고 필요한 부분만 작업했다. transform 을 다시 공부하는 기회가 되었다. 3차원은 어렵다.
'li를 둥글게 굴려서 뱅글뱅글 돌리면 되지 않을까' 여기까진 생각이 닿았지만 막상 구현하는건 어려웠다..ㅎㅎ;; 아직 많이 부족함을 느꼈음..ㅠㅠ
li 개수로 360을 나눠서 각 li 에 transform: rotateX(00deg) 값을 넣어준다.
transform: rotateX 값과 함께 translateZ(00px) 값을 넣어서 원형을 만들어준다. translateZ(0) 값일 경우엔 🐶와 😅 처럼 보인다. 원 중앙에 있던 li들은 입력한 translateZ 값 만큼 바깥으로 밀려나는데, 사실 대충 때려넣은 값으로 작업했다. 중앙에서 2칸 조금 안되게 벌어져야 하기에 li의 height 값인 50px에서 절반 더 주어서 75px로 넣어주었다.
first 버튼과 last 버튼에 따라 fisrt / last li가 보이도록 해주었다. 롤링 애니메이션은 rotateX(xxdeg)를 내 맘대로 넣어서 돌아가게끔 만들었다. 보여주고 싶은 li 가 보이도록 각도를 조절해주면 된다.
css 지식의 부족함을 뼈져리게 깨닫게 해준 시간이었다.ㅎㅎ
✏️공부한 속성들.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ()
translateZ() - CSS: Cascading Style Sheets | MDN
The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a data type. The source for this interactive example is stored in a GitHub repository. If you'd like to contri
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
transform-style - CSS: Cascading Style Sheets | MDN
The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the i
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
animation-fill-mode - CSS: Cascading Style Sheets | MDN
The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples pro
developer.mozilla.org
'웹공부 > css' 카테고리의 다른 글
| absolute anchor tag not work in ie (0) | 2021.02.02 |
|---|---|
| 아이콘이 있는 버튼만들기 - 2 (0) | 2021.01.24 |
| 아이콘이 있는 버튼만들기 (0) | 2018.09.19 |
| css position 알아보기 (0) | 2018.08.18 |
| css calc() 함수 (0) | 2018.08.06 |