好的,我这里有个大问题。我正在创建一个带有 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 );
}