<div>
     setTimeout()
<span class="x" id="myX">
  <svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg
</span>
    
</div>
    
 <div>
requestAnimationFrame()
<span class="x" id="myX2">
  <svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg
</span>
    </div>
.wrapper {
  display: flex;
  gap: 2rem;
}

:root {
    --blue: #4299e1;
    --darkblue: #2b6cb0;
}

body {
  display: flex;
  justify-content: center;
  gap: 3rem;
  align-items: center;
}

div {
  text-align: center;
}

div span {
  margin: 0 auto;
}

.x {
  display: block;
  width: 200px;
  height: 200px;
}

.x svg {
  width: 100%;
  height: 100%;
}

* {
    font-size: 25px;
    font-family: 'Nunito', sans-serif;
}

.wrapper div {
  overflow: auto;
}

let angle = 0;

function rotateX() {
  const x = document.getElementById('myX');
  x.style.transform = `rotate(${angle}deg)`;
  angle = (angle + 5) % 360;
  setTimeout(rotateX, 16.67); // 1000ms / 60 FPS = 16.67ms per frame
}

rotateX();

{

let angle = 0;

function rotateX2() {
  const x = document.getElementById('myX2');
  x.style.transform = `rotate(${angle}deg)`;
  angle = (angle + 5) % 360;
  requestAnimationFrame(rotateX2);
}

rotateX2();
  
}

External CSS

  1. https://fonts.googleapis.com/css?family=Nunito:400,800,900

External JavaScript

This Pen doesn't use any external JavaScript resources.