CSS3过渡使背景消失并改变颜色

Question

好的，我这里有一个大问题.. 我正在创建一个包含CSS3效果的新网站http://sauldesign.com/vtdk/。当我为主标题3D效果（Roll）编写css代码时，其他网站部分已经破碎 - ＃index3和#index4的背景消失了，所有背景图像的颜色变得更轻，更亮。

当您滚动到#index3部分时，您会看到黑色背景（应该有一个图像）。当#index3几乎从视图中滚动到顶部时，您可以看到真实的背景图像（当#index3 bottom从顶部开始大约100px时出现bg图像）。

当我删除所有css3转换和转换代码时，一切正常。这是css3代码：

    /* CSS3 ROLL LINKS */

.main-title {
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-perspective: 300px;
       -moz-perspective: 300px;
        -ms-perspective: 300px;
            perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
.main-title:hover {
    background: none;
    text-shadow: none;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-transform: scale(0.85,0.85);
       -moz-transform: scale(0.85,0.85);
        -ms-transform: scale(0.85,0.85);
            transform: scale(0.85,0.85);
}
.main-title span {
    display: block;
    position: relative;
    padding: 10px 30px;
    pointer-events: none;
    background-color: #fff;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.main-title:hover span {
    background: #fff;

    -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.main-title span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 30px;
    white-space: nowrap;

    color: #2366ac;
    background: #fff; 

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}