小心transform
Posted 认认真真，知难而进。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小心transform相关的知识，希望对你有一定的参考价值。
张老师总结的，感谢！
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的主要内容，如果未能解决你的问题，请参考以下文章
报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段
报错：✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段
RuntimeError: An attempt has been made to start a new process before the current process has...(代码片段