Awesome 3D Rotating Menu Using Pure CSS3

Github avatar
September 30, 2012. 2 min read

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




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


.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); }
position: absolute;
left: 250px;
width: 140px;
height: 50px;
text-align: center;
opacity: 0.7;
color: rgba(0undefined0undefined0undefined0.9);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-transform: rotateY(0deg) translateZ(200px);
-moz-transform: rotateY(0deg) translateZ(200px);
-webkit-transform: rotateY(40deg) translateZ(200px);
-moz-transform: rotateY(40deg) translateZ(200px);
-webkit-transform: rotateY(80deg) translateZ(200px);
-moz-transform: rotateY(80deg) translateZ(200px);
-webkit-transform: rotateY(120deg) translateZ(200px);
-moz-transform: rotateY(120deg) translateZ(200px);
-webkit-transform: rotateY(160deg) translateZ(200px);
-moz-transform: rotateY(160deg) translateZ(200px);
-webkit-transform: rotateY(200deg) translateZ(200px);
-moz-transform: rotateY(200deg) translateZ(200px);
-webkit-transform: rotateY(240deg) translateZ(200px);
-moz-transform: rotateY(240deg) translateZ(200px);
-webkit-transform: rotateY(280deg) translateZ(200px);
-moz-transform: rotateY(280deg) translateZ(200px);
-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.