In this article I provide an example of a Javascript function/s whose only task is rotate a text message in a clockwise motion on intervals of a second. (1000 ticks).

HTML

   <div id="myText">
   </div>

CSS: here we create some css to format each individual char in the message to be displayed. each char will be represented in html by a scan within a div.

div span {
   margin-top: 150px;
   margin-left: 250px;
    font: 26px Monaco, MonoSpace;
    height: 200px;
    position: absolute;
    width: 20px;
    left: 0;
    top: 0;
    transform-origin: bottom center;
  }

We need to set an interval function to execute the rotating function indefinetly with intervals of n. In this case we set n = 1000 or one second.

var interval = setInterval(rotator ,1000);

This is the code we use to create and populate all the scans. # of scans will depend on number of letters in the message to be displayed.

lettering = (msg) => {
    var len = msg.length;
    for (c = 0; c < len; c++)
    {
        let myText = document.getElementById('myText'); 
        let span   = document.createElement('span');
        span.id = 'char' + c;
        span.style.color = '#99c2ff';
        span.textContent = msg[c];
        myText.appendChild(span);
    }
}

The above code function will produce something similar to the HTML code below. 'N' span elements.

<div id="myText">
   <span id="char0" 
              style="color: rgb(153, 194, 255); 
              transform: rotate(70deg);">S</span>

<span id="char1" 
           style="color: rgb(153, 194, 255);
           transform: rotate(78deg);">E</span>
.
.
.
<span id="char42"
           style="color: rgb(153, 194, 255); 
           transform: rotate(406deg);">n</span>
<span id="char43" 
           style="color: rgb(153, 194, 255);
           transform: rotate(414deg);">.</span>
</div>

Lastly, here is the code we use to rotate the text by increasing the degrees for each span and used them by changing every span style with transform - rotate animation function.

function rotator() {
    let msg = "SERGINHO - Rotating text in circular motion.";

    // spans created only once
    if (flag)
    {
        lettering(msg);
        flag = false;
    }   

    ctr = ctr + myVar;
    ctr = ctr > 360 ? 0 : ctr;
    for (let i = 0; i < msg.length; i++)
    {
        let span =  document.getElementById("char" + i );
        span.style.transform = "rotate(" +  (ctr * 6 + i * 8) + "deg)";
    }
 }

See live code below:

Thank you for reading this article.

Let's Connect.

NOTE: This is just one way to do this.

Next Article: Undecided.