CSS3 Implement 3d Menu rollover

Transform-style:flat | preserve-3d;

3d Perspective Properties. This property is declared on the parent element for how the child element renders in 3d space relative to its parent element, and his child elements use transform to be valid. There are two attribute values, one is the flat plane, which is also the default, and the other is preserve-3d when the child element uses transform, the position that retains its 3d is the 3d perspective. In this example, the 3d menu rollover animation uses the transform 3d warp properties, including rotation and movement. When the mouse moves into the menu, the element does a 3d flip animation; When the mouse leaves, revert to the original state

<! DOCTYPE html>{width:980px;margin:50px Auto;Background-color:#fdfdfd;Border:1px #cccccc Solid; }. Nav:after{/*This section of the CSS is mainly to solve the header tag of the child elements because of floating without the height of the header to prop up the problem*/Clear:both;Display:Block;Overflow:Hidden;content: ""; }. Nav. Item{width:200px;Height:100px;float: Left;Border-right:5px #333333 Solid;/*3d element distance from the view, when the element is set perspective, its child elements will get a perspective effect, rather than the element itself is actually the z axis distance, from the screen to the screen inside the distance*/-webkit-perspective:4000px;-moz-perspective:4000px;Perspective:4000px; }. Nav. Item:last-child{Border-right:None; }. Nav. Item A{Display:Block;Height:100px;/*Remove the default bottom line for hyperlinks*/text-decoration:None;-webkit-transition:All . 5s;-moz-transition:All . 5s;-ms-transition:All . 5s;-o-transition:All . 5s;transition:All . 5s;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;Transform-style:preserve-3d; }. Nav. Item A P{Height:100px;margin:0;/*Sets the height of the line, setting the high of the text from the top margin, including the width of the text. This height is the same as height, which is centered vertically*/Line-height:100px;Color:#ffffff;text-align:Center;font-size:20px;Font-famiy:"Microsoft Yahei";-webkit-border-radius:2px;-moz-border-radius:2px;Border-radius:2px;-webkit-transition:All . 5s;-moz-transition:All . 5s;-ms-transition:All . 5s;-o-transition:All . 5s;transition:All . 5s; }. Nav. Item A p:first-child{Background-color:#009900;-webkit-transform:Translatez (50px);-moz-transform:Translatez (50px);-ms-transform:Translatez (50px);-o-transform:Translatez (50px);Transform:Translatez (50px); }. Nav. Item A p:last-child{Background-color:#000099;-webkit-transform:Translatez (50px) Rotatex ( -90deg);-moz-transform:Translatez (50px) Rotatex ( -90deg);-ms-transform:Translatez (50px) Rotatex ( -90deg);-o-transform:Translatez (50px) Rotatex ( -90deg);Transform:Translatez (50px) Rotatex ( -90deg);Margin-top:-50px; }. Nav. Item A:hover{-webkit-transform:Rotatex (90deg);-moz-transform:Rotatex (90deg);-ms-transform:Rotatex (90deg);-o-transform:Rotatex (90deg);Transform:Rotatex (90deg); }. Nav. Item A:hover p:last-child{Margin-top:0;-webkit-transform:Translatez (0) Rotatex ( -90deg);-moz-transform:Translatez (0) Rotatex ( -90deg);-ms-transform:Translatez (0) Rotatex ( -90deg);-o-transform:Translatez (0) Rotatex ( -90deg);Transform:Translatez (0) Rotatex ( -90deg); }</style>

CSS3 Implement 3d Menu rollover