关于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>

// 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;
}