<div class="rotmenucontainer">
  <div class="allrotate">

    <!-- Draw 6 svg lines connecting the circles -->
    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <line x1="300" y1="300" x2="600" y2="300" style="stroke:lightgrey;stroke-width:5" />
     <line x1="300" y1="300" x2="0" y2="300" style="stroke:lightgrey;stroke-width:5" />
     <line x1="300" y1="300" x2="150" y2="40" style="stroke:lightgrey;stroke-width:5" />
     <line x1="300" y1="300" x2="450" y2="40" style="stroke:lightgrey;stroke-width:5" />
     <line x1="300" y1="300" x2="150" y2="560" style="stroke:lightgrey;stroke-width:5" />
     <line x1="300" y1="300" x2="450" y2="560" style="stroke:lightgrey;stroke-width:5" />
		</svg>
    <div class="center-circle">
      <div class="counterrotate">
        <h4>Circling Menu</h4>
      </div>
    </div>

    <div class="service1 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>These</h3>
        </div>
      </a>
    </div>


    <div class="service2 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>are</h3>
        </div>
      </a>
    </div>

    <div class="service3 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>six</h3>
        </div>
    </div>

    <div class="service4 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>nicely</h3>
        </div>
      </a>
    </div>

    <div class="service5 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>moving</h3>
        </div>
      </a>
    </div>

    <div class="service6 service">
      <a href="#" class="servicelink">
        <div class="counterrotate">
          <img src="http://icons.iconarchive.com/icons/danrabbit/elementary/128/Star-grey-icon.png">
          <h3>circles!</h3>
        </div>
      </a>
    </div>

  </div>
</div>
html,
body {
  height: 100%;
  width: 100%;

}

.rotmenucontainer {
    -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
  width:800px;
  height: 800px;
  overflow: hidden;
   background-color: #333333;
  float: left;
}
#mySVG {
  width: 100%;
  height: 100%;
  z-index: 5000;
}

.allrotate {
  width: 600px;
  height: 600px;
  position: relative;
  padding: 95px;

}

.counterrotate img {
  max-width: 59px;
}

.service {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -84px;
  text-decoration: none;
}

.allrotate img {
  margin: 35px 0 0 0;
}

.center-circle {
  background-color: #e87722;
  width: 260px;
  height: 260px;
  margin: -130px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  border: 10px solid white;


}

.center-circle h4 {
  color: #FFF;
  text-transform: uppercase;
   display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

.service1,
.service2,
.service3,
.service4,
.service5,
.service6 {
  background-color: white;
  border-radius: 50%;
  border: 5px solid lightgrey;
  text-align: center;
  color: #ff6600;
  text-transform: uppercase;
  position: absolute;
  width: 160px;
  height: 160px;

}

.counterrotate {
    width: 100%;
  height: 100%;
position: absolute;
    display: table; 
}
/*move each circle away from the centre circle (here, 300px each but can be anything), and rotate to the desired angle (here, 360deg divided by 6)*/
.service1 {
  transform: translate(300px); /* no rotation, just move to the right*/
  
}

.service2 {
  transform: rotate(60deg) translate(300px) rotate(300deg);
}

.service3 {
  transform: rotate(120deg) translate(300px) rotate(240deg);
}

.service4 {
  transform: translate(-300px); /*no rotation, just move to the left*/
}

.service5 {
  transform: rotate(240deg) translate(300px) rotate(120deg);
}

.service6 {
  transform: rotate(300deg) translate(300px) rotate(60deg);
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spinback {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}



@keyframes spinback {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.allrotate {
  -webkit-animation-name: spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 40s;
   animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 40s;
}

.counterrotate {

  -webkit-animation-name: spinback;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 40s;

   animation-name: spinback;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 40s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.