addPhoto()调用后,.wrap的perspective属性就没效果了?

来源:3-2 内容输出

_博文

2017-02-26 14:22

.wrap{
    perspective: 800px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}
.photo-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /*-moz-transform-style: preserve-3d;*/
    transition:all .6s ease-out;
}
function addPhotos() {
   var template=get('#wrap').innerHTML;
   var html=[];
   for(var i in data){
       var _html=template
           .replace('{{index}}',i)
           .replace('{{caption}}',data[i].caption)
           .replace('{{img}}',data[i].img)
           .replace('{{desc}}',data[i].desc)
       html.push(_html)
   }
   get('#wrap').innerHTML=html.join('');
}
addPhotos();

此函数调用后,卡片翻转就没有3d效果了,只是平面压缩效果,这是为啥?

写回答 关注

1回答

  • 慕粉1554206971
    2017-05-17 16:13:48

    我是按照老师视频中的步骤一步一步来的,并没有你这样的问题,你可以试试像老师那样,在浏览器中用控制台查看该部分标签有哪些样式来改改,说真的你这只有这么些代码,有的命名方式还和老师的不一样,没碰到过这种问题的只看这么些代码是看不出问题的,至少你给的这两块代码是没问题的。

CSS3+JS 实现超炫的散列画廊特效

实现更自由的切换照片的画廊效果,打造超酷的切换动画

46091 学习 · 215 问题

查看课程

相似问题