css spin class on text has a very annoying radius

Question

I have a css spin class I found. It works well on other elements, but when I apply it to text, it has a very annoying radius. how do I get the axle of the spin to be in the middle of the text like it should?

.spin {
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

Obsidian Age · Accepted Answer · 2019-02-14T23:04:05.470

It depends on what element your text is in, but the key is in the display property. Any block-level element will be full width by default (such as <div>). You can force the element to be inline-block with display: inline-block, which will constrain the width of the element to the edge of the text, and cause the rotation to function as expected.

This can be seen in the following:

.spin {
  -webkit-animation: spin 4s infinite linear;
  display: inline-block;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<div class="spin">Spin</div>

Note that this will only work for inline-block displays, and not inline displays, as for rotation to work you need the element to be able to adjust its positioning in the container.

css spin class on text has a very annoying radius

1 Answers1