The key part of the CSS code:
. menu UL {List-style-type:NoneBorder-top:10px solid Gray;}. menu ul Li a {Color#fff;FloatLeftMargin0 5px;Font-size:15px;Height50px;Line-height:50px;Text-align:CenterWidth80px;Padding10px 5px;Border-radius:0 0 5px 5px;Box-shadow:0 0 1px #000, inset 0 0 2px #000;Text-shadow:0 2px 2px #000;Text-decoration:none;}. menu ul Li a {Background#2EC7D2;}. menu ul li.translate a:hover {TransformTranslate ( -10px, -10px);}. menu ul li.translate-x a:hover {TransformTranslateX ( -10px);}. menu ul li.translate-y a:hover {TransformTranslatey ( -10px);}. menu ul li.rotate a:hover {TransformRotate (30deg);}. menu ul Li.scale a:hover {TransformScale (0.8, 0.8);}. menu ul li.scale-x a:hover {TransformScaleX (0.8);}. menu ul li.scale-y a:hover {TransformScaleY (1.2);}. menu ul Li.skew a:hover {TransformSkew (30deg, 30deg);}. menu ul li.skew-x a:hover {TransformSkewx ( -30deg);}. menu ul li.skew-y a:hover { Transform: Skewy (30deg);} .menu ul li.matrix a:hover { Transform: matrix (1, 1,-1, 0, 0, 0);} .menu ul li.rotate-y a:hover { Transform:rotatey (120deg);} .menu ul li.rotate-z a:hover { Transform:rotatez (120deg);} .menu ul li.perspective a:hover { Transform:perspective (50px) Rotatey (30deg);} .menu ul li.transform-origin a { Transform-origin: left;
Some HTML code:
<DivClass= "Menu"><UlClass= "Clearfix"><LiClass= "Item Translate"><AHref="#">translate</A></Li><LiClass= "Item Translate-x"><AHref="#">translatex</A></Li><LiClass= "Item Translate-y"><AHref="#">translatey</A></Li><LiClass= "Item Rotate"><AHref="#">rotate</A></Li><LiClass= "Item Scale"><AHref="#">scale</A></Li><LiClass= "Item Scale-x"><AHref="#">scalex</A></Li><LiClass= "Item Scale-y"><AHref="#">scaley</A></Li><LiClass= "Item Skew"><AHref="#">skew</A></Li><LiClass= "Item Skew-x"><AHref="#">skewx</A></Li><LiClass= "Item Skew-y"><AHref="#">skewy</A></Li><LiClass= "Item Matrix"><AHref="#">matrix</A></Li><LiClass= "Item Rotate-y"><AHref="#">rotatey</A></Li><LiClass= "Item Rotate-z"><AHref="#">rotatez</A></li> <li class= "Item Perspective "><a href= "#" > Perspective</a ></li> </ ul></div>
CSS Code 2d/3d