关于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 ...
随机推荐
- 初识Java反射
要详细的了解Java反射,就得要了解Java的类加载以及何为运行时动态加载等等概念.本文抛开其余概念,简单介绍Java反射,详细介绍会在以后有一个系统而全面的认识过后展开. 反射是Java被视为动态语 ...
- jdbc驱动的类加载过程
这段时间跟类加载机制是干上了. 这一篇来分析一下jdbc工作过程中涉及到的类加载流程,重点是想看看在双亲委派模型不适用的时候,如何解决. 第一步,加载数据库的驱动 Class.forName(&quo ...
- Palindrome Number 2015年6月23日
题目: 判断一个数是不是回文数 Determine whether an integer is a palindrome. Do this without extra space. 思路:借助上一道求 ...
- 《Android进阶》之第一篇 在Java中调用C库函数
在Java代码中通过JNI调用C函数的步骤如下: 第一步:编写Java代码 class HelloJNI{ native void printHello(); native void printStr ...
- swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案
TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...
- Android stdio打开特定网页
博主懒不想打字,直接上程序 package com.example.testopen; import android.app.Activity; import android.os.Bundle; ...
- 20个php框架
对于Web开发者来说,PHP是一款非常强大而又受欢迎的编程语言.世界上很多顶级的网站都是基于PHP开发的.本文我们来回顾一下20个2014年最优秀的PHP框架. 每一个开发者都知道,拥有一个强大的框架 ...
- VR全景智慧城市—你的掌上步行街
"春风十里,不如有你",不知不觉间,身边的人已对VR不再陌生,VR眼镜的热销,VR体验店的火爆,VR游戏的向往等等.可见VR就是为生活而诞生! 2015年被称作VR行业的产业元年, ...
- css3 linear-gradient渐变效果及兼容性处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JVM-2.Class文件结构
1.Class文件 (1)无关性:除了平台无关性,JVM还支持语言无关性:目前Clojure.Groovy.JRuby.Jyphon.Scala等语言可以在JVM上运行.实现语言无关性的原理仍然是字节 ...