Awesome 3D Rotating Menu Using Pure CSS3

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(0,0,0,0.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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.