關於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奇技淫巧之堆疊上下文》。
到現在，我基本解決了這個小坑。