3D Animated Navigation Menu CSS3 ( No Script )

.cube { position:fixed; left:50%; top:100px; } .cube h2 { font:bold 16px Arial, Helvetica, sans-serif; color:#FFF; }
.cube.two { top:158px; left:50%; margin-left:-101px; }
.cube.three { top:216px; left:50%; margin-left:-202px; }
.cube.four { top:275px; left:50%; margin-left:-304px; }
.cube.five { top:335px; left:50%; margin-left:-406px; }
.rightFace, .leftFace, .topFace div { padding:10px; width:80px; height:80px; }
.rightFace, .leftFace, .topFace { position:absolute; }
.cube:hover .rightFace, .cube:hover .leftFace, .cube:hover .topFace div { background-color:#f00; }
.cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover .topFace:hover div { background-color:#b20000; }
.leftFace { -webkit-transform:skew(0deg, 30deg); -moz-transform:skew(0deg, 30deg); -o-transform:skew(0deg, 30deg);
-ms-transform:skew(0deg, 30deg); transform:skew(0deg, 30deg); background-color:#039ac6; }
.rightFace { -webkit-transform:skew(0deg, -30deg); -moz-transform:skew(0deg, -30deg); -o-transform:skew(0deg, -30deg);
-ms-transform:skew(0deg, -30deg); transform:skew(0deg, -30deg); background-color:#017a9d; left:100px; }
.topFace div { -webkit-transform:skew(0deg, -30deg) scale(1, 1.16); -moz-transform:skew(0deg, -30deg) scale(1, 1.16);
-o-transform:skew(0deg, -30deg) scale(1, 1.16); -ms-transform:skew(0deg, -30deg) scale(1, 1.16);
transform:skew(0deg, -30deg) scale(1, 1.16); background-color:#03b4e7; font-size:0.862em; }
.topFace { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg);
-ms-transform:rotate(60deg); transform:rotate(60deg); top:-78px; left:50px; }
/* Optional Animations */
.cube { -webkit-transition:-webkit-transform 1s linear; -moz-transition:-moz-transform 1s linear;
-o-transition:-o-transform 1s linear; -ms-transition:-ms-transform 1s linear; transition:transform 1s linear; }
.cube:hover { -webkit-transform:translate(101px, 57px); -moz-transform:translate(101px, 57px);
-o-transform:translate(101px, 57px); -ms-transform:translate(101px, 57px); transform:translate(101px, 57px); }

Tagged in:

• 3D menu css
• 3d navigation css
• css3 animation
• 3d animation css3