How to move text with the wheel in the canvas

Question

I now want to place text on the spikes inside the wheel and I need them to rotate the with the wheel as well. Also these number of spikes can change.I am unable to do this as I am just starting with html. The part where I am having trouble is how to detect the number of spikes in the wheel dynamically.And how to place the p tags dynamically over spikes and then move them with the wheel?

Can someone please help me out here?

Answer 1

As discussion in comments

Posted my answer with pure CSS

 body { text-align: center; padding: 100px 0 0 0; color: #fff; background: #1d1f20; } .wheel { width:255px; height:255px; margin: 0 auto; position: relative; -webkit-animation: rotation 4s infinite linear; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .wheel span{ position: absolute; } span.fir { top: 45px; left: 122px; } span.sec { top: 75px; right: 62px; transform: rotate(45deg); } span.thi { top: 135px; right: 51px; transform: rotate(101deg); } span.frt { top: 190px; right: 92px; transform: rotate(-230deg); } span.fiv { top: 190px; left: 92px; transform: rotate(-136deg); } span.six { top: 135px; left: 51px; transform: rotate(-111deg); } span.svn { top: 75px; left: 62px; transform: rotate(-52deg); }

 <div class="wheel" > <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/car-wheel-2-827505.png"> <span class="fir">hi</span> <span class="sec">hi</span> <span class="thi">hi</span> <span class="frt">hi</span> <span class="fiv">hi</span> <span class="six">hi</span> <span class="svn">hi</span> </div>

You can change image and then change values its as per view