Techumber
Home Blog Work

Awesome 3D Rotating Menu Using Pure CSS3

Published on September 30, 2012

Hi Every One. Thank you  for the response to my previous post Amazing Windows7 Start Menu Using Pure CSS3 . Today I will guide you how to create Awesome 3D Rotating Menu Using Pure CSS3. In this tutorial I used latest CSS3 Properties animation , transform to achieve the 3D effect for the menu. Lets dive in to the code, You will understand better with code. Create Awesome 3D Rotating Menu Using Pure CSS3

Demo

Download

index.html

<div class="menu-ring">
  <div id="item1">
    <a href="#">Home</a>
  </div>
  <div id="item2">
    <a href="#">Web Design</a>
  </div>
  <div id="item3">
    <a href="#">CSS3</a>
  </div>
  <div id="item4">
    <a href="#">PHP</a>
  </div>
  <div id="item5">
    <a href="#">Tutorials</a>
  </div>
  <div id="item6">
    <a href="#">JavaScript</a>
  </div>
  <div id="item7">
    <a href="#">HTML5</a>
  </div>
  <div id="item8">
    <a href="#">FaceBook</a>
  </div>
  <div id="item9">
    <a href="#">Twitter</a>
  </div>
</div>

Style.css

.menu-ring {
  margin: 0 auto;
  height: 110px;
  width: 600px;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 15s;
  -moz-transform-style: preserve-3d;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 15s;
}
.menu-ring > :nth-child(odd) {
  background-color: #515151;
}
.menu-ring > :nth-child(even) {
  background-color: #007acc;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotateY(360deg);
  }
  50% {
    -moz-transform: rotateY(180deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
  }
}
#item1,
#item2,
#item3,
#item4,
#item5,
#item6,
#item7,
#item8,
#item9 {
  position: absolute;
  left: 250px;
  width: 140px;
  height: 50px;
  text-align: center;
  opacity: 0.7;
  color: rgba(0, 0, 0, 0.9);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
#item1 {
  -webkit-transform: rotateY(0deg) translateZ(200px);
  -moz-transform: rotateY(0deg) translateZ(200px);
}
#item2 {
  -webkit-transform: rotateY(40deg) translateZ(200px);
  -moz-transform: rotateY(40deg) translateZ(200px);
}
#item3 {
  -webkit-transform: rotateY(80deg) translateZ(200px);
  -moz-transform: rotateY(80deg) translateZ(200px);
}
#item4 {
  -webkit-transform: rotateY(120deg) translateZ(200px);
  -moz-transform: rotateY(120deg) translateZ(200px);
}
#item5 {
  -webkit-transform: rotateY(160deg) translateZ(200px);
  -moz-transform: rotateY(160deg) translateZ(200px);
}
#item6 {
  -webkit-transform: rotateY(200deg) translateZ(200px);
  -moz-transform: rotateY(200deg) translateZ(200px);
}
#item7 {
  -webkit-transform: rotateY(240deg) translateZ(200px);
  -moz-transform: rotateY(240deg) translateZ(200px);
}
#item8 {
  -webkit-transform: rotateY(280deg) translateZ(200px);
  -moz-transform: rotateY(280deg) translateZ(200px);
}
#item9 {
  -webkit-transform: rotateY(320deg) translateZ(200px);
  -moz-transform: rotateY(320deg) translateZ(200px);
}

In this code we use css3 properties animation,transform to achive 3D effect and rotation effect.-webkit- is for webkit engine based browsers.-moz- for Firfox. If you want to achive this in opera you need to use -o- profix along with other two. That’s it Please share and comment my work.