HTML环形文本应用CSS transform:rotate动画时transform-origin不生效问题

问题诱因 #

• 你当前.curved-text（ID为test）的所有子元素都设置了position: absolute，绝对定位元素会脱离文档流，无法撑起父元素的宽高，导致.curved-text本身的宽高均为0。
• CSS的transform-origin如果用百分比值，是基于元素自身的宽高计算的，0宽高下所有百分比计算出来的偏移量都是0，所以你不管怎么修改百分比形式的变换原点，都不会看到明显效果。

解决方法 #

根据你的使用场景可选两种方案：

方案1：固定父元素尺寸，适配百分比变换原点 #

给.curved-text设置固定宽高，数值匹配环形文本的直径即可：

#test {
  /* 原有属性保留，新增以下内容 */
  /* 你的单个字符p标签高度为165px，对应环形半径165px，直径设为330px */
  width: 330px;
  height: 330px;
}

设置完成后，transform-origin的百分比值就会基于你设置的宽高正常计算，可自由调整。如果需要让环形整体绕自身圆心旋转，直接设置transform-origin: 0 165px即可。

方案2：直接用像素值指定变换原点 #

不需要修改父元素尺寸，直接把transform-origin的参数改成像素值即可，像素偏移不受元素自身宽高影响，哪怕宽高为0也会生效：

#test {
  /* 比如要让旋转中心在环形圆心的位置，就设置为 */
  transform-origin: 0 165px;
}

另外注意：你的动画关键帧里只写了transform: rotate()，会覆盖你提前定义的transform: scale(1)，如果需要保留缩放属性，要把关键帧改成：

@keyframes rotation {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(359deg);
  }
}

内容的提问来源于stack exchange，提问作者BennyB