关于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奇技淫巧之堆叠上下文》。

到现在，我基本解决了这个小坑。