如何在完美的圆圈中旋转文本（div）？

Question

我正在尝试在我的甜甜圈表单周围旋转大的glyphicon箭头。我知道变换：旋转（360度），我一直在使用它，事实是，我试图圈出的div不是simetrical，因此它超出了界限。

看看：

我还试图为每25％创建一个关键帧，但是箭头每隔1/4就停止一次。

这是旋转360度圈子的方式：

https://i.imgur.com/TQppI2p.gifv

我希望它在开始时完全处于边缘，而不是进入图表。

Answer 1

您可以使用animate.css中的animation：

来完成此操作

function animateit(){
var d = document.getElementById("animationSandbox");
d.className += " rotateIn";

}

.site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}
.wrap {
    max-width: fit-content;
    margin: 0 auto;
}
span#animationSandbox {
    display: block;
}

/* the animation that you are looking for */
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
  }

  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
  }
}

.rotateIn {
  animation: rotateIn 2s 5;
}
/* add the above animation to you css an give it to the elemnt you want to animate */

<div class="wrap">
   <span id="animationSandbox" style="display: block;" class=""><h1 class="site__title mega">Animate.css</h1></span>
  </div>

<button onclick="animateit();">see animation</button>

Answer 2

那个甜甜圈看起来对我来说是一个完美的cercle，我想你需要做的就是将下面的CSS应用到你的箭头上：

.my-arrow {
    padding-top: 2px; /* or just add 2px if you already have a padding setting */
}