1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Document</ title > </ head > < style type="text/css"> .nav{ width: 980px; margin: 50px auto; background-color: #fdfdfd; border: 1px #ccc solid; } .nav:after{ clear: both; display: block; overflow: hidden; content: ""; } .nav .item{ width:200px; height: 100px; margin-right: 5px; float: left; perspective:400px; } .nav .item a{ display: block; height: 100px; text-decoration: none; transition:all .5s; transform-style:preserve-3d; } .nav .item a p{ height: 100px; margin:0; line-height: 100px; color: #fff; text-align:center; font-size: 20px; font-family: "Microsoft Yahei"; border-radius: 2px; transition:all .5s; } .nav .item a p:first-child{ background-color: #090; transform:translateZ(50px); } .nav .item a p:last-child{ background-color: #009; /*这样会向结果方向走50px像素*/ transform:translateZ(50px) rotateX(-90deg) ; /*margin-top: -50px;*/ } /*立体旋转是按面在转*/ .nav .item a:hover{ transform:rotateX(90deg); } /*这东西是基于正常位置,而不是动画的位置如(transform:translateZ(50px) rotateX(-90deg) ;)*/ .nav .item a:hover p:last-child{ margin-top: 0; transform: translateZ(0) rotateX(-90deg); } </ style > < body > < header class="nav"> < div class="item"> < a href="#"> < p >首页</ p > < p >Home</ p > </ a > </ div > < div class="item"> < a href="#"> < p >问答</ p > < p >Q & A</ p > </ a > </ div > < div class="item"> < a href="#"> < p >关于我们</ p > < p >About us</ p > </ a > </ div > </ header > </ body > </ html > |
之前一直想不通,如下为什么旋转到上面后要再旋转-90deg。
1 2 3 4 5 | /*这东西是基于正常位置,而不是动画的位置如(transform:translateZ(50px) rotateX(-90deg) ;)*/ .nav .item a:hover p:last-child{ margin-top: 0; transform: translateZ(0) rotateX(-90deg); }< br >< br > 另外rotateX(-90deg)是上边缘向屏幕外旋转,也就是顺时针。反之。 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步