CSS旋转HTML圆圈文本的动画，变换原点不起作用

Question

我在应用CSStransform:rotate动画到HTML中获得的圆形文本时遇到了一个问题。

.rotText{
min-width: 80vw;
margin: 5vh auto;
text-align: center;
position: relative;
}
#test{
font-weight: 900;
color: #394add;
font-size: 20px;
display: inline-block;
margin-bottom: 128px;
position: relative;
z-index: 10;
border: 1px solid #f00;
transform: scale(1);
transform-origin: center center;
animation: rotation 5s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

<div class="rotText">
<img src="05-img/Thinking man.png" alt="">
<div class="curved-text" id="test">
<p style="height:165px; position:absolute; transform:rotate(0deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(8.78048780487805deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(17.5609756097561deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(26.34146341463415deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(35.1219512195122deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(43.90243902439025deg);
transform-origin:0 100%">g</p><p style="height:165px; position:absolute; transform:rotate(52.6829268292683deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(61.463414634146346deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(70.2439024390244deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(79.02439024390245deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(87.8048780487805deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(96.58536585365854deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(105.3658536585366deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(114.14634146341464deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(122.92682926829269deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(131.70731707317074deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(140.4878048780488deg);
transform-origin:0 100%">v</p><p style="height:165px; position:absolute; transform:rotate(149.26829268292684deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(158.0487804878049deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(166.82926829268294deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(175.609756097561deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(184.39024390243904deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(193.1707317073171deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(201.95121951219514deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(210.7317073170732deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(219.51219512195124deg);
transform-origin:0 100%">m</p><p style="height:165px; position:absolute; transform:rotate(228.2926829268293deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(237.07317073170734deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(245.85365853658539deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(254.63414634146343deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(263.4146341463415deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(272.19512195121956deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(280.9756097560976deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(289.7560975609756deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(298.5365853658536deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(307.31707317073165deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(316.09756097560967deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(324.8780487804877deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(333.6585365853657deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(342.43902439024373deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(351.21951219512175deg);
transform-origin:0 100%"></p>
</div>
</div>

所以，旋转关键帧

工作正常，但我真的不能移动DIV(类'curved-text')的原点。有人能告诉我问题出在哪里吗?我想这可能是由于外部DIV的起源，所以我试图用CSS命令改变它，但它没有工作。

任何想法?

Answer 1

给高度的父绝对定位的孩子，这是你正在寻找的?

.rotText{
min-width: 80vw;
margin: 5vh auto;
text-align: center;
position: relative;
}
#test{
font-weight: 900;
color: #394add;
font-size: 20px;
display: inline-block;
margin-bottom: 128px;
position: relative;
z-index: 10;
transform: scale(1);
transform-origin: center center;
animation: rotation 5s linear infinite;
height: calc(330px + 2rem);.
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

<div class="rotText">
<img src="05-img/Thinking man.png" alt="">
<div class="curved-text" id="test">
<p style="height:165px; position:absolute; transform:rotate(0deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(8.78048780487805deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(17.5609756097561deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(26.34146341463415deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(35.1219512195122deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(43.90243902439025deg);
transform-origin:0 100%">g</p><p style="height:165px; position:absolute; transform:rotate(52.6829268292683deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(61.463414634146346deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(70.2439024390244deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(79.02439024390245deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(87.8048780487805deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(96.58536585365854deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(105.3658536585366deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(114.14634146341464deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(122.92682926829269deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(131.70731707317074deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(140.4878048780488deg);
transform-origin:0 100%">v</p><p style="height:165px; position:absolute; transform:rotate(149.26829268292684deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(158.0487804878049deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(166.82926829268294deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(175.609756097561deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(184.39024390243904deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(193.1707317073171deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(201.95121951219514deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(210.7317073170732deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(219.51219512195124deg);
transform-origin:0 100%">m</p><p style="height:165px; position:absolute; transform:rotate(228.2926829268293deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(237.07317073170734deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(245.85365853658539deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(254.63414634146343deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(263.4146341463415deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(272.19512195121956deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(280.9756097560976deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(289.7560975609756deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(298.5365853658536deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(307.31707317073165deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(316.09756097560967deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(324.8780487804877deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(333.6585365853657deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(342.43902439024373deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(351.21951219512175deg);
transform-origin:0 100%"></p>
</div>
</div>