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;
}
如何可以避免图片闪烁那种情况。多谢。
为什么我把你的代码一运行什么都看不到,我替换了那个照片的链接也是。什么都没有。
你的视点和元素在相同位置,看不到元素
你的CSS中没有
transition
,也没有转动的代码,无法帮你调试试试这样
-webkit-transform: translate3d(0, 0, 575px);
开启3d加速