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变换的小坑的更多相关文章

  1. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  2. 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 好吧,CSS3 3D transform变换,不过如此!

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  4. 好吧,CSS3 3D transform变换,不过如此!——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  6. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  7. 关于css3中transform的理解(只是改变状态未改变其真正的属性)

    众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></d ...

  8. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  9. python-django中使用事务以及小坑

    django中使用事务 一.导入事务模块 from django.db import transaction 二.对相应的业务进行事务操作 方式一:为整个函数进行事务操作 @transaction.a ...

随机推荐

  1. 初识Java反射

    要详细的了解Java反射,就得要了解Java的类加载以及何为运行时动态加载等等概念.本文抛开其余概念,简单介绍Java反射,详细介绍会在以后有一个系统而全面的认识过后展开. 反射是Java被视为动态语 ...

  2. jdbc驱动的类加载过程

    这段时间跟类加载机制是干上了. 这一篇来分析一下jdbc工作过程中涉及到的类加载流程,重点是想看看在双亲委派模型不适用的时候,如何解决. 第一步,加载数据库的驱动 Class.forName(&quo ...

  3. Palindrome Number 2015年6月23日

    题目: 判断一个数是不是回文数 Determine whether an integer is a palindrome. Do this without extra space. 思路:借助上一道求 ...

  4. 《Android进阶》之第一篇 在Java中调用C库函数

    在Java代码中通过JNI调用C函数的步骤如下: 第一步:编写Java代码 class HelloJNI{ native void printHello(); native void printStr ...

  5. swfit - 实现类似今日头条顶部标签和底部内容的动态解决方案

    TYPageView TYPageView 类似今日头条 的标签导航解决方案,支持多种样式选择,基于swift3.0,支持文字颜色动态变化,底部选中线的动态变化 配图: 使用方法: let title ...

  6. Android stdio打开特定网页

    博主懒不想打字,直接上程序 package com.example.testopen;   import android.app.Activity; import android.os.Bundle; ...

  7. 20个php框架

    对于Web开发者来说,PHP是一款非常强大而又受欢迎的编程语言.世界上很多顶级的网站都是基于PHP开发的.本文我们来回顾一下20个2014年最优秀的PHP框架. 每一个开发者都知道,拥有一个强大的框架 ...

  8. VR全景智慧城市—你的掌上步行街

    "春风十里,不如有你",不知不觉间,身边的人已对VR不再陌生,VR眼镜的热销,VR体验店的火爆,VR游戏的向往等等.可见VR就是为生活而诞生! 2015年被称作VR行业的产业元年, ...

  9. css3 linear-gradient渐变效果及兼容性处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. JVM-2.Class文件结构

    1.Class文件 (1)无关性:除了平台无关性,JVM还支持语言无关性:目前Clojure.Groovy.JRuby.Jyphon.Scala等语言可以在JVM上运行.实现语言无关性的原理仍然是字节 ...