SCSSで円柱マーキーを作った話

いろんなサイトでよく見かける円状のマーキーをCSS（SCSS）で立体にしてみました。
名付けて、シリンダー（円柱）マーキー！

今回はそのコーディングを解説してみたいと思います。

完成系動画こちら。

コードの解説

HTML

1文字ごとにspanタグで囲みます。

<div class="wrapper">
    <div class="texts">
      <span>W</span>
      <span>E</span>
      <span>L</span>
      <span>C</span>
      <span>O</span>
      <span>M</span>
      <span>E</span>
      <span>&nbsp;</span>
      <span>T</span>
      <span>O</span>
      <span>&nbsp;</span>
      <span>M</span>
      <span>Y</span>
      <span>&nbsp;</span>
      <span>P</span>
      <span>E</span>
      <span>N</span>
      <span>&nbsp;</span>
    </div>
  </div>

SCSS

テキストたちを囲むラッパー要素にtransform-style: preserve-3d;を使って、子要素を立体にします。

.texts {
  transform-style: preserve-3d;
}

次に、.texts子要素のspan（1文字ずつ）にSCSSのfor文を使って、位置を設定します。
全18文字あるので、@for $i from 1 through 18とし、1文字ずつの角度を$angle変数に$i * (360deg / 18)として格納します。
rotateX部分に$angle変数を入れ、奥行きのtranslateZを調節します。
このままではテキストは縦方向に並んでしまうので、 rotateZ(90deg)を最後に追加します。

.texts span {
  @for $i from 1 through 18 {
    &:nth-of-type(#{$i}) {
      $angle: $i * (360deg / 18);
      transform: rotateX($angle) translateZ(160px) rotateZ(90deg);
    }
  }
}

最後に回転の動きを追加して完成です。

.texts {
  animation:  anim 25s linear infinite;
}

@keyframes anim {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotateY(360deg);
  }
}

Codepenはこちら。

See the Pen Cylinder Text by Hayakawa (@hayamine01) on CodePen.

お試しあれです。