3D旋转不能对齐，元素边倾斜

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

巴特西

3D旋转不能对齐，元素边倾斜

最新文章

热门文章