Home > Developer > Web Develop
Css3 3D animation menu flip up and down, css3 3D animation flip
<! Doctype html>
<Html lang = zh-cn>
<Head>
<Meta charset = UTF-8>
<Title> css3 3D animation menu flip up and 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.5 s;
-Moz-transition: 0.5 s;
-O-transition: 0.5 s;
Transition: 0.5 s;
-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>
</Head>
<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 Marshal </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>
</Html>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
