Solution 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 {
	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="">
	<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>

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

Problem :

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?


Comment posted by imageprocessing

As its image so you cant detect anything inside image without

Comment posted by abhishek ranjan

okay suppose we have say 7 spikes only, then how can we place text on each spike and make it rotate.

Comment posted by Awais

Yes this is possible i can show you this example in a while

Comment posted by Awais

Do let me know if you got any issue regarding to ans below

Comment posted by abhishek ranjan

Thanks @Awais for the answer. I was able to achieve the css part but wasn’t sure that whether it was optimal solution. Also the animation part is big learning for me.

Comment posted by Awais

No problem. a simple logic is i just stick the text with css rotation and then move that img in which text is a part of that img….