首页 > 我写css3D变换的时候,加上了渐变transition。然后再转动的时候图片老是闪烁,请问怎么解决。

我写css3D变换的时候,加上了渐变transition。然后再转动的时候图片老是闪烁,请问怎么解决。

html结致为:

    <div class="stage3d">
        <div class="object3d">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

css为:

.stage3d{
    width:100px;
    height:600px;
    margin:0 auto 0 auto;
    -webkit-perspective:575px;
    -webkit-perspective-origin:50% 50%;
}

.object3d{
    width:inherit;
    height:inherit;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:translateZ(575px);
}

.object3d div{
    width:inherit;
    height:inherit;
    position:absolute;
    background-image:url('../img/bg.jpg');
    background-size:auto 100%;
    -webkit-backface-visibility:hidden;
}

如何可以避免图片闪烁那种情况。多谢。

为什么我把你的代码一运行什么都看不到,我替换了那个照片的链接也是。什么都没有。


  1. 你的视点和元素在相同位置,看不到元素

  2. 你的CSS中没有transition,也没有转动的代码,无法帮你调试


试试这样

.object3d{
    width:inherit;
    height:inherit;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -webkit-transform: translate3d(0, 0, 575px);
}

-webkit-transform: translate3d(0, 0, 575px);开启3d加速

【热门文章】
【热门文章】