首页 > 代码库 > 小心transform

小心transform

2024-08-25 10:18:22   237人阅读

 张老师总结的，感谢！

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>Document</title>  6     <style>  7     .test1-wrap,.test2-wrap{  8         border: 1px dashed #000;  9         margin-bottom: 20px; 10     } 11     /* 解决办法一 */ 12     .test1-wrap .overflow{ 13         overflow: hidden; 14     } 15     .test1-wrap .test1-top{ 16         position: absolute; 17         width: 200px; 18         height: 50px; 19         background-color: green; 20         z-index: 999; 21  22         /* 解决办法二 */ 23         /* transform: translateZ(100px); */ 24     } 25     .test1-wrap .test1-bot{ 26         width: 100px; 27         height: 100px; 28         background-color: red; 29         transform: perspective(300px) rotateY(40deg); 30     } 31  32     .test2-top{ 33         width: 100px; 34         height: 100px; 35         background-color: red; 36         /* 照理说这个会在下面，可是加了这句话就会跑上来了 */ 37         transform: scale(1); 38     } 39     .test2-bot{ 40         margin-top: -50px; 41         width: 100px; 42         height: 100px; 43         background-color: green; 44     } 45  46     .test3-top{ 47         width: 100px; 48         height: 100px; 49         position: fixed; 50         top: 300px; 51         right: 0; 52         background-color: #000; 53     } 54     .test4-wrap{ 55         width: 100px; 56         height: 100px; 57         border: 10px solid #000; 58         overflow: hidden; 59         margin-bottom: 100px; 60     } 61     .test4-top{ 62         width: 150px; 63         height: 150px; 64         background-color: green; 65         position: absolute; 66     } 67     .test5-wrap{ 68         width: 200px; 69         height: 200px; 70         border: 1px solid #333; 71         transform: scale(1); 72     } 73     .test5-top{ 74         position: absolute; 75         width: 100%; 76         height: 100%; 77         background-color: red; 78     } 79     </style> 80 </head> 81 <body style="height: 1000px;"> 82     <!-- Safari 3D变化后忽略层级 --> 83     <div class="test1-wrap"> 84         <div class="test1-top"></div> 85         <div class="overflow"> 86             <div class="test1-bot"></div> 87         </div> 88     </div> 89     <!-- 提升元素的垂直地位 --> 90     <div class="test2-wrap"> 91         <div class="test2-top"></div> 92         <div class="test2-bot"></div> 93     </div> 94     <!-- position:fixed变absolute --> 95     <div class="test3-wrap" style="transform: scale(1);"> 96         <div class="test3-top"></div> 97     </div> 98     <!-- 正常是不会隐藏的 --> 99     <div class="test4-wrap">100         <div class="test4-top"></div>101     </div>102     <!-- Chrome/Opera不行 -->103     <div class="test4-wrap" style="transform:scale(1);">104         <div class="test4-top"></div>105     </div>106     <!-- 都行 -->107     <div class="test4-wrap">108         <div style="transform:scale(1);">109             <div class="test4-top"></div>110         </div>111     </div>112     <!-- 对定位的影响 -->113     <div class="test5-wrap">114         <div class="test5-top">dsfsdfsdf</div>115     </div>116 </body>117 </html>

 

小心transform


联系
我们