CSS에서 워드 휠 만들기

여름 방학은 휴식을 위한 날이기 때문에 평소에 책을 많이 읽습니다. 올해 내가 읽은 제목 중 하나는 Timothy Samara의 Making and breaking the grid이었습니다. 훌륭하고 영감을 주는 책.

사실, 너무 고무적입니다! 책은 보석으로 가득 차 있습니다. 그래서 ... 다음과 같은 것을 볼 때 :



— 나는 나 자신을 도울 수 없습니다. 코딩만 하면 되네요!


그것은 매우 복잡하지 않습니다. 다음과 같은 단어 배열을 사용합니다.

const arr = 'word word word etc'.split(' ')

그런 다음 원하는 태그로 출력합니다. 제 경우에는 <strong> 입니다. 각 항목에 대해 현재index로 사용자 정의 속성을 설정합니다.

arr.map((txt, index) => `
<strong style="--d:${index};">
  ${txt}
</strong>`).join('')

부모 요소에서 배열 길이로 사용자 지정 속성을 설정합니다.

app.style.setProperty('--ln', arr.length);

NOTE: You don't need JavaScript for the word-wheel. It's perfecty fine to manually write a bunch of tags (see Codepen-example later).

CSS에서 parent-element를 position:relative로 설정하고 모든 자식을 다음과 같이 설정합니다.

strong {
  inline-size: var(--c);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  padding-inline-start: var(--c);
  position: absolute;
  translate: -50% -50%;
}

--c는 원의 크기입니다.
rotate (모든 브라우저에서 now available as an individual transform!) 및 사용자 지정 속성을 사용합니다.

calc(var(--d) * 1deg * (360 / var(--ln)));

UPDATE: Since some people have issues with individual transforms, I've changed them to a "classic" combined value: transform: translate(-50%, -50%) rotate(calc(var(--d) * 1deg * (360 / var(--ln, 1))));

그리고 그게 다야. 동적 색조font-size 등으로 예제를 확장했습니다. 이 Codepen에서 컨트롤을 사용해 보십시오(전체 화면에서 가장 잘 볼 수 있음).