css3简易菜单,有趣的CSS3菜单

css

*{

margin:0;

padding:0;

}

body{

color:#fff;

background:#2c3e50;

font-size: 12px;

min-width: 800px;

display: block;

position: relative;

}

.wrapcube{

-webkit-perspective: 2000px;

perspective: 2000px;

-webkit-perspective-origin: center center;

perspective-origin: center center;

width:200px;

height:320px;

position:absolute;

top:50px;

left:50px;

}

.cube{

width:100%;

height:50px;

margin:0 0 0 0;

position:relative;

-webkit-transition:.25s all ease-out;

transition:.25s all ease-out;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

font-family: arial, helvetica, sans-serif;

text-align: center;

line-height: 4.5;

}

#a{z-index:1;}

#b{z-index:2;}

#c{z-index:3;}

#d{z-index:4;}

#e{z-index:3;}

#f{z-index:2;}

#g{z-index:1;}

.cube[data-rotate='1']{

-webkit-transform: rotateY(3deg) translateZ(-00px) translateX(0px);

transform: rotateY(3deg) translateZ(-00px) translateX(0px);

}

.cube[data-rotate='2']{

-webkit-transform: rotateY(6deg) translateZ(-00px) translateX(0px);

transform: rotateY(6deg) translateZ(-00px) translateX(0px);

}

.cube[data-rotate='3']{

-webkit-transform: rotateY(9deg) translateZ(-00px) translateX(0px);

transform: rotateY(9deg) translateZ(-00px) translateX(0px);

}

.cube[data-rotate='4']{

-webkit-transform: rotateY(12deg) translateZ(-00px) translateX(0px);

transform: rotateY(12deg) translateZ(-00px) translateX(0px);

}

.cube[data-rotate='5']{

-webkit-transform: rotateY(15deg) translateZ(-00px) translateX(0px);

transform: rotateY(15deg) translateZ(-00px) translateX(0px);

}

.cube[data-rotate='6']{

-webkit-transform: rotateY(18deg) translateZ(-00px) translateX(0px);

transform: rotateY(18deg) translateZ(-00px) translateX(0px);

}

.side{

width:100%;

height:100%;

position:absolute;

backface:hidden;

}

.front {

height:50px;

-webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

}

.left {

height:50px;

-webkit-transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

}

.right {

height:50px;

-webkit-transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

}

.back {

height:50px;

-webkit-transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px);

}

.top {

height:200px;

-webkit-transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px);

transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px);

}

.bottom {

height:200px;

-webkit-transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px);

transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px);

}

#a .side{ background:#16a085; }

#a .front{ background:#1abc9c; }

#b .side{ background:#27ae60; }

#b .front{ background:#2ecc71; }

#c .side{ background:#2980b9; }

#c .front{ background:#3498db; }

#d .side{ background:#8e44ad; }

#d .front{ background:#9b59b6; }

#e .side{ background:#f39c12; }

#e .front{ background:#f1c40f; }

#f .side{ background:#d35400; }

#f .front{ background:#e67e22; }

#g .side{ background:#c0392b; }

#g .front{ background:#e74c3c; }

h1{

font-size: 8em;

font-family: 'Lobster Two';

font-style: italic;

text-align: right;

line-height: .3;

display: table;

position: absolute;

top: 60px;

right: 30px;

text-shadow: 2px 4px rgba(0,0,0,.3);

color: #ecf0f1;

}

h1 small{

font-size: .2em;

}