关于CSS3中transform变换的小坑
2017年6月30日15:05:46
今天在写一个demo的时候,发现CSS3中transform变换的一个特性。
首先,我先描述一下我发现的情况(问题再现):
<div class="box box-mission">
<span class="icon"></span>
<div class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
GHOST
</div>
</div>
如上代码块,在一个div盒子中有两个组成部分,一个是span,一个是div。
// span样式
.box .icon {
display: inline-block;
width: 100%;
height: 190px;
// 解决方法1
// margin-bottom: 20px;
transition: .2s linear;
-ms-transition: .2s linear;
-o-transition: .2s linear;
-webkit-transiton: .2s linear;
-moz-transition: .2s linear;
}
.box-mission .icon {
background: url("mission.png") no-repeat center center;
}
.box-mission .icon:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
}
// class为button的div的样式
box .button {
// 解决方法2
// position: relative;
width: 180px;
height: 50px;
padding-left: 10px;
line-height: 50px;
color: #2DCB70;
font-weight: bold;
border: 2px solid rgba(255,255,255,0.8);
background: url("allow.png") no-repeat 130px center;
transition: .2s ease;
-ms-transition: .2s ease;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
-moz-transition: .2s ease;
}
.box .button:hover {
border: 2px solid rgba(255,255,255,0.8);
background-position: 160px center;
}
如上代码块,分别为上面提到的两个组成部分.icon和.button的样式,.icon和.button都有一个hover(鼠标悬浮)的效果,.icon被hover时进行了一个transform变换。显示效果如下:
接下来就是重点:当我在.icon上hover后,.icon应用了transform的样式,下一步我让鼠标慢慢向下移动到.button的区域,.button的hover效果并未立即出现,等到我移动鼠标过半的时候,hover样式生效了!!!
我脑海中有个奇怪的问题:难道元素的hover事件会被阻塞吗?
解决方法:
因为我是看完教学视频,感觉效果不错,想凭自己的记忆还原出原来的效果。所以我找到原始代码,一对照,原来是少了一个position:relative,就是上面的解决方法2。
后来我注意到.icon的hover样式中有transform:scale(1.2),放大1.2倍的效果。我想是不是因为.icon的放大,把下面.button区域遮住了,于是想出了解决方法1,就是增加.icon的底部外边距。
解决方法可能不止这两种吧。
进一步,我在想这个hover效果为什么和平时不一样,不就是多了个CSS3的transform吗?
Google了一下,在http://www.html-js.com/article/2518 《transform你不知道的那些事》中,我看到下面的一些文字:
任何非none的transform值都会导致一个堆叠上下文(stacking context)和包含块(containing block)的创建。
这个CSS3中transform导致了一个堆叠上下文的创建,导致.icon所在的上下文环境在.buttion的上面,遮挡了.button的区域,因此出现了上面的问题。解决方法1,是将.icon经过transform变换的区域预留出来,这样就不会影响会别的元素了。解决方法2,是通过position:relative产生一个新的堆叠上下文,让.button在.icon经过transform后的区域的上面。产生一个新的堆叠上下文的方法,也是同一个博主的文章http://www.html-js.com/article/2523 《W3C奇技淫巧之堆叠上下文》。
到现在,我基本解决了这个小坑。
关于CSS3中transform变换的小坑的更多相关文章
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- 关于css3中transform的理解(只是改变状态未改变其真正的属性)
众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></d ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- python-django中使用事务以及小坑
django中使用事务 一.导入事务模块 from django.db import transaction 二.对相应的业务进行事务操作 方式一:为整个函数进行事务操作 @transaction.a ...
随机推荐
- Unity中提升像素字体清晰度
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.6.0f3 Unity UI系统是非常好的,但默认情况下,使用像像素艺术风格游戏那样需要非常锋利的边框的字体 ...
- 取代netcat
前言 众所周知,netcat是网络界的瑞士军刀,它的主要作用是:提供连接其他终端的方法,可以上传文件,反弹shell等等各种利于别人控制你电脑的操作.所以聪明的系统管理员会将它从系统中移除,这样当别人 ...
- 面试(4)-spring-Spring面试题和答案
1:69道Spring面试题和答案 转自:http://ifeve.com/spring-interview-questions-and-answers/ 目录 Spring 概述 依赖注入 Spri ...
- SmartCoder每日站立会议03
1.站立会议内容 今天是站立会议第三天,由于我们是做微信小程序,所以很多方面大家都在试验学习阶段,但是经过之前的了解和最近的学习,大家还是有很大进步的.首页简单的css样式已出,正在考虑首页样式再进行 ...
- Your data vis “Spidey-sense” & the need for a robust “utility belt”
@theboysmithy did a great piece on coming up with an alternate view for a timeline for an FT piece. ...
- 时间序列分析算法【R详解】
简介 在商业应用中,时间是最重要的因素,能够提升成功率.然而绝大多数公司很难跟上时间的脚步.但是随着技术的发展,出现了很多有效的方法,能够让我们预测未来.不要担心,本文并不会讨论时间机器,讨论的都是很 ...
- sql还原(.bak文件还原)
第一步: 右键“数据库”,选择“还原数据库” 第二步: 选择“设备”,然后选择“…” 第三步: 添加备份文件(这里使用MyDB.bak) 第四步: 勾选“还原”复选框,进度显示“已完成” 第五步: 最 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- python基础操作_文件读写操作
#文件读写# r只能读不能写,且文件必须存在,w只能写不能读,a只能写不能读# w+是写读模式,清空原文件内容# r+是读写模式,没有清空原文件内容,# 只要有r,文件必须存在,只要有w,都会清空原文 ...
- linux tesseract 安装及部署tess4j项目的常见问题
linux上部署tess4j项目 在windows上项目是可以正常运行的,部署到Linux上后,运行报异常,异常内容为:Unable to load library 'tesseract': Nati ...