javascript - 我写css3D变换的时候,加上了渐变transition。然后再转动的时候图片老是闪烁,请问怎么解决。
大家讲道理
大家讲道理 2017-04-11 12:02:34
0
3
426

html结致为:

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

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 p{
    width:inherit;
    height:inherit;
    position:absolute;
    background-image:url('../img/bg.jpg');
    background-size:auto 100%;
    -webkit-backface-visibility:hidden;
}

如何可以避免图片闪烁那种情况。多谢。
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

Antworte allen(3)
黄舟

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

大家讲道理
  1. 你的视点和元素在相同位置,看不到元素

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

Peter_Zhu

试试这样

.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加速

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage