张老师总结的，感谢！

  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>
  1. function getCss(curEle,attr){
  2.     var val = null,reg = null;
  3.     // var val = reg = null;//这样写reg是全局的
  4.     if(window.getComputedStyle){
  5.         val = window.getComputedStyle(curEle,null)[attr];
  6.     }
  7.     else{// ie6-8
  8.         if(attr === "opacity"){
  9.             val = curEle.currentStyle["filter"];// alpha(opacty=10)
  10.             reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
  11.             val = reg.test(val) ? reg.exec(val)[] /  : ;
  12.         }
  13.         else{
  14.             val = curEle.currentStyle[attr];
  15.         }
  16.     }
  17.  
  18.     reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
  19.     return reg.test(val) ? parseFloat(val) : val;
  20. }

小心transform的更多相关文章

  1. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  2. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  3. transform.localPosition操作时的一些注意事项

    移动GameObject是非常平常的一件事情,一下代码看起来很简单: transform.localPosition += new Vector3 ( 10.0f * Time.deltaTime, ...

  4. Gameobject.Find和Transform.Find应用区别

    using UnityEngine;using System.Collections; public class test : MonoBehaviour{ private GameObject ro ...

  5. Transform 引起的 z-index "失效"

    重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 ...

  6. 【OI向】快速傅里叶变换(Fast Fourier Transform)

    [OI向]快速傅里叶变换(Fast Fourier Transform) FFT的作用 ​ 在学习一项算法之前,我们总该关心这个算法究竟是为了干什么. ​ (以下应用只针对OI) ​ 一句话:求多项式 ...

  7. 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  8. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  9. 深入node之Transform

    Transform流特性 在开发中直接接触Transform流的情况不是很多,往往是使用相对成熟的模块或者封装的API来完成流的处理,最为特殊的莫过于through2模块和gulp流操作.那么,Tra ...

随机推荐

  1. Oracle 修改带数据的字段类型

    http://www.cnblogs.com/LDaqiang/articles/1157998.html由于需求变动,现要将一个类型NUMBER(8,2)的字段类型改为 char.大体思路如下:   ...

  2. 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片

    效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...

  3. Struts2学习三----------Action搜索顺序

    © 版权声明:本文为博主原创文章,转载请注明出处 Struts2的Action的搜索顺序 http://localhost:8080/path1/path2/student.action 1)判断pa ...

  4. 光盘yum源搭建步骤

  5. 仿VS安装界面小球滑动效果

    在Visual Studio 2010后续版本的安装界面中,可以发现一组小球在滑动表示安装程序正在进行: 于是尝试用CSS实现了一下. 首先需要建立用来表示小球的html结构: <div cla ...

  6. linux中MACHINE_START&END在9g10ek上实现

    在linux的板卡初始化文件中有machine的相关定义 //arch/arm/mach-at91/board-sam9261ek.c MACHINE_START(AT91SAM9G10EK, &qu ...

  7. Unity3D研究院之拓展自定义编辑器窗口

    Unity支持自行创建窗口,也支持自定义窗口布局.在Project视图中创建一个Editor文件夹,在文件夹中在创建一条脚本. 自定义窗口需要让脚本继承EditorWindow在设置MenuItem, ...

  8. pycharm连git和gitee

    http://www.cnblogs.com/feixuelove1009/p/5955332.html https://www.58jb.com/html/171.html

  9. 【BZOJ3291】Alice与能源计划 二分图最大匹配

    [BZOJ3291]Alice与能源计划 Description 在梦境中,Alice来到了火星.不知为何,转眼间Alice被任命为火星能源部长,并立刻面临着一个严峻的考验. 为了方便,我们可以将火星 ...

  10. EasyPlayerPro Windows播放器全屏模式下GDI显示出现黑屏问题解决

    问题来源 2017.12.21 前天有杭州某教育领域客户反馈有部分视频源在全屏模式下显示黑屏: 问题复现 EasyPlayerPro由于没有实现单个窗口完全全屏,故没有暴露该问题,晚上加班,加上单个窗 ...