Perfect infinite rotation for ֍ character

问题

Im trying to use this character

֍

in place of a loading spinner.

Here's what I've got so far:

.spinner::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
  transform-origin: 50% 50%;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>

Even though this works, it is not perfect because the rotation does currently not happen around the perfect center of the character despite

transform-origin: 50% 50%;

making it look less than stellar.

Any ideas how to fix this?

回答1:

I would use a fixed height equal to the font-size then play with line-height until I get it right. Also no need to set transform-origin since by default it's set to center

.spinner::after {
  content: "֍";
  font-size: 60px;
  font-weight: normal;
  line-height: 0.8;
  display: inline-block;
  height: 60px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>

回答2:

it happens because a character height and width are not equal...

I tried to increase the height until It does what you want..

and here is the result:

.spinner::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  height: 80px;
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>

回答3:

Three Properties

line-height: 3; 
transform-origin: 50% 54%; 
text-align: center; 

Demo

.spinner::after {
  animation: spin 2s infinite linear;
  content: "֍";
  font-size: 5em;
  display: inline-block;
  font-weight: normal;
  /* Required */
  line-height: 3;
  /* Required */
  transform-origin: 50% 54%;
  /* Required */
  text-align: center;
  /* Optional for Position */
  position: relative;
  width: 3em;
  top: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}

<i class="spinner"></i>

回答4:

You will not get perfect center while rotating rectangle shape but you will get perfect center if its square shape

see demo below

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: brown;
    text-align: center;
    position: relative;
    margin: 10px;
    float: left;
}

.spinner0::after {
  animation: rotating 2s linear infinite;
  content: "֍";
  height: 80px;
  font-size: 60px;
  display: inline-block;
  font-weight: normal;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg) scale(1);
    color: rgba(0, 0, 0, .5);
  }
  50% {
    transform: rotate(180deg) scale(.8);
    color: rgba(0, 0, 0, .85);
  }
  100% {
    transform: rotate(360deg);
    color: rgba(0, 0, 0, .5);
  }
}


div > i:before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner1::after{
    animation: rotating 5s linear infinite;
    content: "֍";
    font-size: 60px;
    line-height: 60px;
    display: inline-block;
    font-weight: normal;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -30px;
    margin-left: -22px;
}


.spinner2::after {
    animation: rotating 5s linear infinite;
    content: "֍";
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    transform: rotate(90deg);
    margin-left: 2px;
}


.spinner3::after {
    animation: rotating 5s linear infinite;
    content: "";
    height: 30px;
    width: 30px;
    font-size: 60px;
    line-height: 1;
    display: inline-block;
    font-weight: normal;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -15px;
}

<div>
  <i class="spinner1"></i>
</div>
<div>
  <i class="spinner2"></i>
</div>
<div>
  <i class="spinner3"></i>
</div>

if you still want to rotate rectangular shape/icon then along with rotation you have to adjust its position a bit

hope you got my point here

来源：https://stackoverflow.com/questions/54670247/perfect-infinite-rotation-for-character