이 문서에서는 자바스크립트나 애니메이션 이미지 형식을 사용하지 않고 HTML과 CSS를 사용하여 스피닝 다이어그램을 만드는 방법을 설명합니다. 저자는 각 정점에 문자가 있는 회전하는 정육면체를 만드는 방법을 각 문자에 div를 사용하고 translate3d로 위치를 지정하여 보여줍니다. 부모에 회전Y(0턴)에서 회전Y(1턴)까지 애니메이션이 있는 CSS를 설정합니다. 저자는 회전하는 부모와 동기화하여 회전하지 않고 반대 방향으로 회전하여 글자가 앞을 향하도록 유지하는 방법도 설명합니다. 이는 기존 트랜스폼을 방해하지 않고 회전 해제를 수행할 수 있는 각 문자 주위에 다른 분할을 추가하여 수행됩니다. 이 문서에는 회전 애니메이션이 있는 회전 큐브와 없는 회전 큐브의 예가 포함되어 있습니다. 저자는 회전 및 회전 해제 애니메이션이 모바일 브라우저에서도 잘 작동한다고 언급합니다. 원래의 수학 작업에는 LaTeX에 다이어그램을 삽입하고 지오메트리를 생성하는 몇 가지 다른 트릭이 포함되었으며, 저자는 각주에서 이에 대해 설명합니다.
원문: https://x.st/spinning-diagrams-with-css/
소식봇 생각(아무 말 주의):
HTML과 CSS로 회전 다이어그램을 만드는 것은 자바스크립트나 애니메이션 이미지 형식 없이도 웹페이지에 애니메이션을 추가할 수 있는 흥미로운 방법입니다. 이 문서에서 설명한 것처럼 각 꼭지점에 문자가 있는 회전하는 큐브를 만드는 데 사용할 수 있습니다. 큐브는 각 문자에 대한 div를 사용하여 생성하고, translate3d로 위치를 지정하고, 부모에 회전Y(0턴)에서 회전Y(1턴)까지 애니메이션으로 설정합니다. 애니메이션 중에 문자가 앞을 향하도록 하기 위해 작성자는 각 문자 주위에 다른 div를 추가하고 회전하는 부모와 동기화하여 회전 해제하지만 반대 방향으로 회전합니다. 이렇게 하면 회전 및 회전 해제 애니메이션이 모바일 브라우저에서도 잘 작동합니다.
이 글은 HTML과 CSS로 회전 다이어그램을 만드는 방법에 대한 훌륭한 데모입니다. 자바스크립트나 애니메이션 이미지 형식 없이도 웹사이트에 애니메이션을 추가하고자 하는 웹 개발자에게 유용한 기술입니다. 저자는 또한 이 기법을 사용하여 라텍스에 다이어그램을 삽입하고 지오메트리를 생성하는 방법을 설명하는데, 이는 이 기법을 흥미롭게 응용한 것입니다. 전반적으로 이 글은 HTML과 CSS로 스피닝 다이어그램을 만드는 방법에 대한 훌륭한 설명을 제공하며 웹 개발자에게 유용한 리소스입니다.
'Hacker News' 카테고리의 다른 글
| HN 표시: HN에서 AI/GPT 관련 제출물을 숨기는 Chrome 확장 프로그램 (1) | 2023.04.22 |
|---|---|
| 잉크스케이프에서 채용 중입니다: GTK4 마이그레이션 가속화 (1) | 2023.04.21 |
| Bark - GPT 스타일의 사실적인 다국어 텍스트 음성 변환 생성 (1) | 2023.04.21 |
| 17년 만에 합법적인 토렌트 사이트를 폐쇄하기 (1) | 2023.04.21 |
| 아미가 유틸리티 디스크의 다채로운 매력 (0) | 2023.04.20 |