Taki efekt możesz uzyskać np przez umieszczenie cyfr w dodatkowym spanie i ustawienie wysokości i szerokości na tylko tyle ile zajmuje tekst w środku np przez initial (w przeciwnym wypadku odziedziczy po zewnętrznym spanie).
Taka sytuacja sprawi, że będziesz mieć "2 płaszczyzny", pierwsza będzie odpowiedzialna za przesuwanie na kolejne miejsca a druga za prostowanie cyfr. Na przykład w wyniku pierwszego przesunięcia cyfra przesunie Ci się o 40 stopni i jednocześnie przekrzywi o 40 stopni, żeby to naprostować trzeba przekrzywić (samą literę - drugą płaszczyznę) o -40 stopni i tak dla każdej.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokument</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.loader {
position: relative;
width: 100px;
height: 100px;
}
.loader span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(40deg * var(--i)));
}
.loader span>span {
width: initial;
height: initial;
transform: rotate(calc(-40deg * var(--i)));
}
</style>
</head>
<body>
<div class="loader">
<span style="--i:1;"><span>1</span></span>
<span style="--i:2;"><span>2</span></span>
<span style="--i:3;"><span>3</span></span>
<span style="--i:4;"><span>4</span></span>
<span style="--i:5;"><span>5</span></span>
<span style="--i:6;"><span>6</span></span>
<span style="--i:7;"><span>7</span></span>
<span style="--i:8;"><span>8</span></span>
<span style="--i:9;"><span>9</span></span>
</div>
</body>