小心transform
张老师总结的,感谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test1-wrap,.test2-wrap{
border: 1px dashed #000;
margin-bottom: 20px;
}
/* 解决办法一 */
.test1-wrap .overflow{
overflow: hidden;
}
.test1-wrap .test1-top{
position: absolute;
width: 200px;
height: 50px;
background-color: green;
z-index: 999; /* 解决办法二 */
/* transform: translateZ(100px); */
}
.test1-wrap .test1-bot{
width: 100px;
height: 100px;
background-color: red;
transform: perspective(300px) rotateY(40deg);
} .test2-top{
width: 100px;
height: 100px;
background-color: red;
/* 照理说这个会在下面,可是加了这句话就会跑上来了 */
transform: scale(1);
}
.test2-bot{
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
} .test3-top{
width: 100px;
height: 100px;
position: fixed;
top: 300px;
right: 0;
background-color: #000;
}
.test4-wrap{
width: 100px;
height: 100px;
border: 10px solid #000;
overflow: hidden;
margin-bottom: 100px;
}
.test4-top{
width: 150px;
height: 150px;
background-color: green;
position: absolute;
}
.test5-wrap{
width: 200px;
height: 200px;
border: 1px solid #333;
transform: scale(1);
}
.test5-top{
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body style="height: 1000px;">
<!-- Safari 3D变化后忽略层级 -->
<div class="test1-wrap">
<div class="test1-top"></div>
<div class="overflow">
<div class="test1-bot"></div>
</div>
</div>
<!-- 提升元素的垂直地位 -->
<div class="test2-wrap">
<div class="test2-top"></div>
<div class="test2-bot"></div>
</div>
<!-- position:fixed变absolute -->
<div class="test3-wrap" style="transform: scale(1);">
<div class="test3-top"></div>
</div>
<!-- 正常是不会隐藏的 -->
<div class="test4-wrap">
<div class="test4-top"></div>
</div>
<!-- Chrome/Opera不行 -->
<div class="test4-wrap" style="transform:scale(1);">
<div class="test4-top"></div>
</div>
<!-- 都行 -->
<div class="test4-wrap">
<div style="transform:scale(1);">
<div class="test4-top"></div>
</div>
</div>
<!-- 对定位的影响 -->
<div class="test5-wrap">
<div class="test5-top">dsfsdfsdf</div>
</div>
</body>
</html>
function getCss(curEle,attr){
var val = null,reg = null;
// var val = reg = null;//这样写reg是全局的
if(window.getComputedStyle){
val = window.getComputedStyle(curEle,null)[attr];
}
else{// ie6-8
if(attr === "opacity"){
val = curEle.currentStyle["filter"];// alpha(opacty=10)
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val = reg.test(val) ? reg.exec(val)[] / : ;
}
else{
val = curEle.currentStyle[attr];
}
} reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val) ? parseFloat(val) : val;
}
小心transform的更多相关文章
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- transform.localPosition操作时的一些注意事项
移动GameObject是非常平常的一件事情,一下代码看起来很简单: transform.localPosition += new Vector3 ( 10.0f * Time.deltaTime, ...
- Gameobject.Find和Transform.Find应用区别
using UnityEngine;using System.Collections; public class test : MonoBehaviour{ private GameObject ro ...
- Transform 引起的 z-index "失效"
重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 ...
- 【OI向】快速傅里叶变换(Fast Fourier Transform)
[OI向]快速傅里叶变换(Fast Fourier Transform) FFT的作用 在学习一项算法之前,我们总该关心这个算法究竟是为了干什么. (以下应用只针对OI) 一句话:求多项式 ...
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 深入node之Transform
Transform流特性 在开发中直接接触Transform流的情况不是很多,往往是使用相对成熟的模块或者封装的API来完成流的处理,最为特殊的莫过于through2模块和gulp流操作.那么,Tra ...
随机推荐
- 【转载】ASP.Net请求处理机制初步探索之旅 - Part 3 管道
开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...
- svn自动部署
版本库目录hooks下创建post-commit.bat TortoiseProc.exe /command:update /path:"E:\web_server\sial\" ...
- webpack3.0 环境搭建
额.备份一下总是好的 #为了避免某些国外镜像源安装失败,先设置淘宝镜像代理 yarn config set registry https://registry.npm.taobao.org # 初始化 ...
- Struts2学习二----------访问Servlet API
© 版权声明:本文为博主原创文章,转载请注明出处 Struts2提供了三种方式去访问Servlet API -ActionContext -实现*Aware接口 -ServletActionConte ...
- 【转】【selenium+Python WebDriver】之元素定位不到解决办法
感谢: 煜妃的<Python+Selenium定位不到元素常见原因及解决办法(报:NoSuchElementException)> ClassName定位报错问题:<[Python] ...
- 奇妙的go语言(開始篇)
[ 声明:版权全部.欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 从前接触脚本语言不多,可是自从遇到go之后,就開始慢慢喜欢上了这个脚本语言.go语言是goog ...
- Kali安装OCI8 for metasploit Oracle login
ps:安装了好久,最好才发现很简单,步骤记录下吧 遇到oracle爆破登录的时候OCI8报错,如下图 安装oracle 前面关于oracle client的安装就看官方文档吧 http://dev.m ...
- php函数: set_include_path
<?php $p =get_include_path(); $p.=PATH_SEPARATOR.'./bp/'; $p.=PATH_SEPARATOR.'./CLI/'; $p.=PATH_S ...
- 【题解】CF359B Permutation
[题解]CF359B Permutation 求一个长度为\(2n\)的序列,满足\(\Sigma |a_{2i}-a_{2i-1}|-|\Sigma a_{2i}-a_{2i-1}|=2k\) 这种 ...
- 【Java线程】锁机制:synchronized、Lock、Condition(转)
原文地址 1.synchronized 把代码块声明为 synchronized,有两个重要后果,通常是指该代码具有 原子性(atomicity)和 可见性(visibility). 1.1 原子性 ...