パーツ番号 02-12-07 ・ CSSのみ

サーキュラーテキスト回転

1文字ずつ円周上に配置した文字列が、リング全体でゆっくり回転し続けます。スタンプ風ロゴやブランドエンブレムの装飾アクセントに。

css3d

プレビュー

ソースコード

HTML

<div class="d02-12-07-circle">
          <span class="d02-12-07-ch">サ</span>
          <span class="d02-12-07-ch">ー</span>
          <span class="d02-12-07-ch">ク</span>
          <span class="d02-12-07-ch">ル</span>
          <span class="d02-12-07-ch">テ</span>
          <span class="d02-12-07-ch">キ</span>
          <span class="d02-12-07-ch">ス</span>
          <span class="d02-12-07-ch">ト</span>
        </div>

CSS

.prev.d02-12-07{ background:#0f1222; }
        .d02-12-07 .d02-12-07-circle{
          position:relative;
          width:150px;
          height:150px;
          animation:d02-12-07-spin 14s linear infinite;
        }
        .d02-12-07 .d02-12-07-ch{
          position:absolute;
          top:50%; left:50%;
          width:22px; height:22px;
          margin:-11px 0 0 -11px;
          text-align:center;
          font-size:15px;
          font-weight:700;
          color:#a5b4fc;
        }
        .d02-12-07 .d02-12-07-ch:nth-child(1){ transform:rotate(0deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(2){ transform:rotate(45deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(3){ transform:rotate(90deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(4){ transform:rotate(135deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(5){ transform:rotate(180deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(6){ transform:rotate(225deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(7){ transform:rotate(270deg) translateY(-64px); }
        .d02-12-07 .d02-12-07-ch:nth-child(8){ transform:rotate(315deg) translateY(-64px); }
        @keyframes d02-12-07-spin{
          from{ transform:rotate(0deg); }
          to{ transform:rotate(360deg); }
        }

クラス名 .d02-12-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。