transform:rotateでアーチ状の文字をグルグル回す方法もしくはそのほかの方法に

こちらのサイトの右下にposition:fixedされているものと同じものを作りたいです。

グーグル検索で見つからなかったので、自力で頑張ってみました。

デベロッパーツールで見ると、
１まず円上（アーチ状）に文字を並べて、
２それをグルグル回す

ように見えました。

まず、アーチ状に文字を並べることはできましたが、それを固定してrotateすることができませんでした。

ここまでのコードを載せておきます。

何かわかる方、css3に詳しい方、ご教授ください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <style>
5    .section1-clock{
6      position: absolute;
7      top: 50vh;
8      right: 50vw;
9    }
10    .section1-clock-inner{
11      position: relative;
12      width: 100px;
13      height: 100px;
14      transform-origin: 0 50%;
15      animation: rotation 1.5s linear infinite;
16    }
17    .section1-clock span {
18    	font-size: 10px;
19    	height: 100px;
20    	position: absolute;
21    	color:black;
22    	width: 20px;
23    	transform-origin: bottom center;
24    	}
25      .char1 { transform: rotate(-38deg); }
26      .char2 { transform: rotate(-34deg); }
27      .char3 { transform: rotate(-29deg); }
28      .char4 { transform: rotate(-25deg); }
29      .char5 { transform: rotate(-22deg); }
30      .char6 { transform: rotate(-18deg); }
31      .char7 { transform: rotate(-14deg); }
32      .char8 { transform: rotate(-10deg); }
33      .char9 { transform: rotate(-6deg); }
34      .char10 { transform: rotate(-1deg); }
35      .char11 { transform: rotate(2deg); }
36      .char12 { transform: rotate(6deg); }
37      .char13 { transform: rotate(12deg); }
38      .char14 { transform: rotate(17deg); }
39      .char15 { transform: rotate(18deg); }
40      .char16 { transform: rotate(22deg); }
41      .char17 { transform: rotate(26deg); }
42      .char18 { transform: rotate(30deg); }
43      .char19 { transform: rotate(34deg); }
44      .char20 { transform: rotate(38deg); }
45      .char21 { transform: rotate(42deg); }
46      .char22 { transform: rotate(46deg); }
47      .char23 { transform: rotate(47deg); }
48
49      .char24 { transform: rotate(85deg); }
50      .char25 { transform: rotate(89deg); }
51      .char26 { transform: rotate(93deg); }
52      .char27 { transform: rotate(97deg); }
53      .char28 { transform: rotate(101deg); }
54      .char29 { transform: rotate(105deg); }
55      .char30 { transform: rotate(109deg); }
56      .char31 { transform: rotate(113deg); }
57      .char32 { transform: rotate(117deg); }
58      .char33 { transform: rotate(121deg); }
59      .char34 { transform: rotate(125deg); }
60      .char35 { transform: rotate(129deg); }
61      .char36 { transform: rotate(133deg); }
62      .char37 { transform: rotate(37deg); }
63      .char38 { transform: rotate(141deg); }
64      .char39 { transform: rotate(145deg); }
65      .char40 { transform: rotate(149deg); }
66      .char41 { transform: rotate(153deg); }
67      .char42 { transform: rotate(157deg); }
68      .char43 { transform: rotate(161deg); }
69      .char44 { transform: rotate(165deg); }
70      .char45 { transform: rotate(169deg); }
71      .char46 { transform: rotate(173deg); }
72
73      .char47 { transform: rotate(208deg); }
74      .char48 { transform: rotate(212deg); }
75      .char49 { transform: rotate(216deg); }
76      .char50 { transform: rotate(220deg); }
77      .char51 { transform: rotate(224deg); }
78      .char52 { transform: rotate(228deg); }
79      .char53 { transform: rotate(232deg); }
80      .char54 { transform: rotate(236deg); }
81      .char55 { transform: rotate(240deg); }
82      .char56 { transform: rotate(244deg); }
83      .char57 { transform: rotate(248deg); }
84      .char58 { transform: rotate(252deg); }
85      .char59 { transform: rotate(256deg); }
86      .char60 { transform: rotate(260deg); }
87      .char61 { transform: rotate(264deg); }
88      .char62 { transform: rotate(268deg); }
89      .char63 { transform: rotate(272deg); }
90      .char64 { transform: rotate(276deg); }
91      .char65 { transform: rotate(280deg); }
92      .char66 { transform: rotate(284deg); }
93      .char67 { transform: rotate(288deg); }
94      .char68 { transform: rotate(292deg); }
95      .char69 { transform: rotate(296deg); }
96      @keyframes rotation {
97          0% {
98          }
99          100% {
100              transform: rotate(360deg);
101          }
102      }
103  }
104  </style>
105</head>
106<body>
107      <div class="section1-clock">
108        <div class="section1-clock-inner">
109          <span class="char1">F</span>
110          <span class="char2">O</span>
111          <span class="char3">L</span>
112          <span class="char4">L</span>
113          <span class="char5">O</span>
114          <span class="char6">W</span>
115          <span class="char7"></span>
116          <span class="char8">T</span>
117          <span class="char9">H</span>
118          <span class="char10">E</span>
119          <span class="char11"></span>
120          <span class="char12">W</span>
121          <span class="char13">H</span>
122          <span class="char14">I</span>
123          <span class="char15">T</span>
124          <span class="char16">E</span>
125          <span class="char17"></span>
126          <span class="char18">R</span>
127          <span class="char19">A</span>
128          <span class="char20">B</span>
129          <span class="char21">B</span>
130          <span class="char22">I</span>
131          <span class="char23">T</span>
132
133          <span class="char24">F</span>
134          <span class="char25">O</span>
135          <span class="char26">L</span>
136          <span class="char27">L</span>
137          <span class="char28">O</span>
138          <span class="char29">W</span>
139          <span class="char30"></span>
140          <span class="char31">T</span>
141          <span class="char32">H</span>
142          <span class="char33">E</span>
143          <span class="char34"></span>
144          <span class="char35">W</span>
145          <span class="char36">H</span>
146          <span class="char37">I</span>
147          <span class="char38">T</span>
148          <span class="char39">E</span>
149          <span class="char40"></span>
150          <span class="char41">R</span>
151          <span class="char42">A</span>
152          <span class="char43">B</span>
153          <span class="char44">B</span>
154          <span class="char45">I</span>
155          <span class="char46">T</span>
156          <span class="char47"></span>
157          <span class="char48"></span>
158
159          <span class="char49">F</span>
160          <span class="char50">O</span>
161          <span class="char51">L</span>
162          <span class="char52">L</span>
163          <span class="char53">O</span>
164          <span class="char54">W</span>
165          <span class="char55"></span>
166          <span class="char56">T</span>
167          <span class="char57">H</span>
168          <span class="char58">E</span>
169          <span class="char59"></span>
170          <span class="char60">W</span>
171          <span class="char61">H</span>
172          <span class="char62">I</span>
173          <span class="char63">T</span>
174          <span class="char64">E</span>
175          <span class="char65"></span>
176          <span class="char66">R</span>
177          <span class="char67">A</span>
178          <span class="char68">B</span>
179          <span class="char69">B</span>
180          <span class="char70">I</span>
181          <span class="char71">T</span>
182          <span class="char72"></span>
183          <span class="char73"></span>
184        </div>
185      </div>
186  <!-- </div> -->
187</body>
188</html>
189

行動規範の内容に同意します

回答2件

svgのサンプル上げておきます

svg set textpath

※円弧の計算がややこしいのでjsで処理してあります

投稿2020/11/17 08:17

yambejp

総合スコア115010

yambejp

2020/11/17 08:18

ブラウザによってはもっとかんたんに書けるんですが・・・またEdgeで回転できてないので課題です

行動規範の内容に同意します

ベストアンサー

リンク先はアーチ状のテキストは画像を使ってますね。

提示のコードで回転が固定しないのは回転の中心がずれているからですね。

transform-origin を左下に設定すればいいでしょう。

css
1      .section1-clock-inner{
2        position: relative;
3        width: 100px;
4        height: 100px;
5        transform-origin: left bottom; /* 修正 */
6        animation: rotation 5s linear infinite;
7      }
8      .section1-clock span {
9        font-size: 10px;
10        height: 100px;
11        position: absolute;
12        color:black;
13        width: 20px;
14        transform-origin: left bottom;  /* 修正 */
15      }

CodePenサンプル

投稿2020/11/16 13:32

編集2020/11/16 13:34

hatena19

総合スコア33790

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

transform:rotateでアーチ状の文字をグルグル回す方法もしくはそのほかの方法に

関連した質問