<! DOCTYPE html>
<meta charset=utf-8>
<TITLE>CSS3 Three-dimensional animation menu upside down </title>
<style>
*{margin:0px;padding:0px;}
Body{background: #b1b1b1; Margin:0px;padding:0px;font-size:14px;color: #000;}
. tips{width:980px;margin:0 auto;line-height:24px;padding-top:10px;}
. Bredcolor{color: #fff;}
#info {Overflow:hidden;}
/* The menu style */
. menuholder {margin:1px 0 20px 0; text-align:center; position:relative; height:40px; z-index:20; background: #069;
Background-image:-moz-linear-gradient ( -90deg, Rgba (255, 255, 255, 0.7), RGBA (255, 255, 255, 0));
Background-image:-webkit-linear-gradient ( -90deg, Rgba (255, 255, 255, 0.5), RGBA (255, 255, 255, 0));
Background-image:-o-linear-gradient ( -90deg, Rgba (255, 255, 255, 0.5), RGBA (255, 255, 255, 0));
Background-image:linear-gradient ( -90deg, Rgba (255, 255, 255, 0.5), RGBA (255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px-8px Rgba (0,0,0,0.4);
-moz-perspective:100px;
-webkit-perspective:100px;
-o-perspective:100px;
perspective:100px;
}
. Menuholder Ul.nav li {display:inline-block; display:inline;}
. menuholder Ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
. Menuholder Ul.nav li {float:left; display:block; padding:0 4px;}
. menuholder Ul.nav > li {-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
. Menuholder Ul.nav Li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
. menuholder Ul.nav Li A.top-a B {display:block; padding:0 20px; Font:normal 14px/30px Arial, Sans-serif; Color: #fff;}
. Menuholder Ul.nav li:hover a.top-a {background: #09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
Box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
}
. menuholder Ul.nav Div {position:absolute; top:40px; left:4px; background: #09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px-8px Rgba (0,0,0,0.4);
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
-moz-transform-origin:0px 0px;
-moz-transform:rotatex ( -80DEG);
-webkit-transform-origin:0px 0px;
-webkit-transform:rotatex ( -90DEG);
-o-transform-origin:0px 0px;
-o-transform:rotatex ( -90DEG);
transform-origin:0px 0px;
Transform:rotatex ( -90DEG);
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
Backface-visibility:hidden;
}
. Menuholder Ul.nav Div.left {left:auto; right:4px;}
. Menuholder Ul.nav Div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline ; Text-align:left; Background: #fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
Box-shadow:inset 0px 3px 3px rgba (0, 0, 0, 0.4);
}
. Menuholder Ul.nav Div ul.colleft {margin-left:10px;}
. Menuholder Ul.nav Div ul.colright {margin-right:10px;}
. Menuholder Ul.nav Div ul.colsingle {margin-left:10px; margin-right:10px;}
. menuholder Ul.nav Div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; Display:inline;}
. Menuholder Ul.nav Div ul li:last-child {border:0;}
. menuholder Ul.nav Div ul Li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color: #069; margin:0; padding:4px 0 4px 15px; Background:transparent URL ("Arrow.gif") No-repeat left center;}
. menuholder Ul.nav Div ul li a:hover {color: #09c; background:transparent url ("arrow.gif") no-repeat 1px Center;}
. Menuholder Ul.nav div.col1 {width:160px;}
. Menuholder Ul.nav div.col2 {width:310px;}
. Menuholder Ul.nav div.col3 {width:460px;}
. Menuholder Ul.nav Li:hover Div {
-moz-transform:rotatex (0DEG);
-webkit-transform:rotatex (0DEG);
-o-transform:rotatex (0DEG);
Transform:rotatex (0DEG);
}
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div class= "Menuholder" >
<ul class= "NAV" >
<li><a class= "top-a" href= "#url" ><b>Home</b></a></li>
<li><a class= "top-a" href= "#url" ><b>Resort</b></a>
<div class= "Col3" >
<ul class= "Colleft" >
<li><a href= "#url" >ski slopes</a></li>
<li><a href= "#url" >night life</a></li>
<li><a href= "#url" >ski Hire facilities</a></li>
</ul>
<ul class= "Col" >
<li><a href= "#url" >snow hotel</a></li>
<li><a href= "#url" >ice cavern</a></li>
<li><a href= "#url" >ski inn</a></li>
</ul>
<ul class= "Colright" >
<li><a href= "#url" >advanced skills</a></li>
<li><a href= "#url" >beginners slopes</a></li>
<li><a href= "#url" >intermediate slopes</a></li>
<li><a href= "#url" >Expert</a></li>
</ul>
</div>
</li>
<li><a class= "top-a" href= "#url" ><b>Information</b></a>
<div class= "Col2" >
<ul class= "Colleft" >
<li><a href= "#url" >lift passes</a></li>
<li><a href= "#url" >Insurance</a></li>
<li><a href= "#url" >snow report</a></li>
<li><a href= "#url" >gear rental</a></li>
</ul>
<ul class= "Colright" >
<li><a href= "#url" >Boots</a></li>
<li><a href= "#url" >Skis</a></li>
<li><a href= "#url" >Goggles</a></li>
</ul>
</div>
</li>
<li><a class= "top-a" href= "#url" ><b>Contact</b></a>
<div class= "Col1" >
<ul class= "Colsingle" >
<li><a href= "#url" >Email</a></li>
<li><a href= "#url" >Telephone</a></li>
<li><a href= "#url" >online form</a></li>
</ul>
</div>
</li>
<li><a class= "top-a" href= "#url" ><b>Privacy</b></a></li>
<li><a class= "top-a" href= "#url" ><b>Nearby</b></a>
<div class= "col2 left" >
<ul class= "Colleft" >
<li><a href= "#url" >where to Go</a></li>
<li><a href= "#url" >what to Do</a></li>
<li><a href= "#url" >places of interest</a></li>
</ul>
<ul class= "Colright" >
<li><a href= "#url" >snow hotel</a></li>
<li><a href= "#url" >the snowman</a></li>
<li><a href= "#url" >ice cavern</a></li>
<li><a href= "#url" >ski inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
CSS3 Three-dimensional animation menu upside down
