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; 不知道有没有更好的方法。
