HTML圆形文本的CSS旋转动画，transform-origin不起作用答案

【问题标题】：CSS rotate animation of HTML circle text, transform-origin doesn't workHTML圆形文本的CSS旋转动画，transform-origin不起作用
【发布时间】：2021-12-11 22:08:00
【问题描述】：

我在将 CSS transform: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 的原点（类“曲线文本”）。有没有人能解释一下问题出在哪里？

我认为这可能是由于外部 DIV 的来源，所以我尝试使用 CSS 命令更改它，但它不起作用。

有什么想法吗？

【问题讨论】：

当你给#test一个高度值时会发生什么：height: calc(330px + 2rem);。

标签： html css css-animations

【解决方案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>

【讨论】：