1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>3d导航栏</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 ul { 16 margin: 100px; 17 } 18 19 li { 20 list-style: none; 21 } 22 23 ul li { 24 float: left; 25 width: 120px; 26 height: 35px; 27 } 28 29 .box { 30 perspective: 500px; 31 position: relative; 32 width: 100%; 33 height: 100%; 34 transform-style: preserve-3d; 35 transition: 2s all; 36 } 37 38 .box:hover { 39 transform: rotateX(90deg); 40 } 41 42 .front, 43 .bottom { 44 position: absolute; 45 top: 0; 46 left: 0; 47 width: 100%; 48 height: 100%; 49 color: #fff; 50 font-weight: bold; 51 text-align: center; 52 line-height: 35px; 53 } 54 55 .front { 56 background-color: pink; 57 transform: translate3d(0, 0, 17.5px); 58 /* border-top-left-radius: 10px; */ 59 /* border-top-right-radius: 10px; */ 60 } 61 62 .bottom { 63 background-color: purple; 64 transform: translate3d(0, 17.5px, 0) rotateX(-90deg); 65 /* border-bottom-left-radius: 10px; */ 66 /* border-bottom-right-radius: 10px; */ 67 } 68 </style> 69 </head> 70 71 <body> 72 <ul> 73 <li> 74 <div class="box"> 75 <div class="front">2333</div> 76 <div class="bottom">1551</div> 77 </div> 78 </li> 79 <li> 80 <div class="box"> 81 <div class="front">2333</div> 82 <div class="bottom">1551</div> 83 </div> 84 </li> 85 <li> 86 <div class="box"> 87 <div class="front">2333</div> 88 <div class="bottom">1551</div> 89 </div> 90 </li> 91 <li> 92 <div class="box"> 93 <div class="front">2333</div> 94 <div class="bottom">1551</div> 95 </div> 96 </li> 97 </ul> 98 </body> 99 100 </html>
3D导航栏旋转90度后 bottom元素会变成
这样，两条边会倾斜,而且不能对齐，我自己的解决方法是拉大视距
perspective: 999999px; 不知道有没有更好的方法。