2

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

当您滚动到#index3 部分时，您会看到黑色背景（应该有图像）。当#index3 几乎从视图滚动到顶部时，您可以看到真实的背景图像出现（当#index3 底部距离顶部约100px 时出现背景图像）。

当我删除所有 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 );
}
4

0 回答 0