Voici un bloc plug-and-play (HTML/CSS/JS) pour une un ballon de basket roule sur place : la voiture reste centrée, les roues tournent, la route et l’arrière-plan défilent, et un léger panache de fumée apparaît.

<div class="basket-rotate">
  <svg class="ball" viewBox="0 0 100 100" aria-label="Ballon de basket qui tourne">
    <defs>
      <!-- Remplissage orange + reflet -->
      <radialGradient id="ballFill" cx="38%" cy="32%" r="75%">
        <stop offset="0%"  stop-color="#FF9A45"/>
        <stop offset="42%" stop-color="#F07C22"/>
        <stop offset="100%" stop-color="#C95B12"/>
      </radialGradient>
      <radialGradient id="spec" cx="32%" cy="28%" r="42%">
        <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.35"/>
        <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
      </radialGradient>

      <!-- Biseau discret sur les rainures -->
      <filter id="seamBevel" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="b"/>
        <feSpecularLighting in="b" surfaceScale="2" specularConstant="0.7" specularExponent="18" lighting-color="#fff" result="s">
          <fePointLight x="-40" y="-50" z="80"/>
        </feSpecularLighting>
        <feComposite in="s" in2="SourceAlpha" operator="in"/>
        <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>

      <!-- CLIP: tout ce qui suit reste strictement dans le disque -->
      <clipPath id="clipBall" clipPathUnits="userSpaceOnUse">
        <circle cx="50" cy="50" r="49"/>
      </clipPath>
    </defs>

    <!-- Disque orange + reflet -->
    <circle cx="50" cy="50" r="49" fill="url(#ballFill)"/>
    <circle cx="50" cy="50" r="49" fill="url(#spec)"/>

    <!-- Rainures (clipées dans le cercle) -->
    <g clip-path="url(#clipBall)">
      <g stroke="#111" stroke-width="3" stroke-linecap="round" fill="none" filter="url(#seamBevel)" opacity=".95">
        <!-- horizontale centrale (raccourcie pour éviter les bords) -->
        <path d="M4 50 H95.5"/>
        <!-- courbe gauche -->
        <path d="M22 6 C 34 22, 34 78, 22 94"/>
        <!-- courbe droite -->
        <path d="M78 6 C 66 22, 66 78, 78 94"/>
      </g>
    </g>
  </svg>
</div>

<style>
  .basket-rotate{
    --size: clamp(140px, 32vmin, 260px);
    --speed: 2.6s; /* durée d’un tour */
    display:grid; place-items:center; background:transparent; padding:8px 0;
  }
  .basket-rotate .ball{
    width: var(--size); height: var(--size);
    animation: spin var(--speed) linear infinite;
    transform-origin: 50% 50%;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce){
    .basket-rotate .ball{ animation: none; }
  }
</style>