Q:

css spin class on text has a very annoying radius

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);}   
}

A:

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.

