_博文
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效果了,只是平面压缩效果,这是为啥?
我是按照老师视频中的步骤一步一步来的,并没有你这样的问题,你可以试试像老师那样,在浏览器中用控制台查看该部分标签有哪些样式来改改,说真的你这只有这么些代码,有的命名方式还和老师的不一样,没碰到过这种问题的只看这么些代码是看不出问题的,至少你给的这两块代码是没问题的。
CSS3+JS 实现超炫的散列画廊特效
46085 学习 · 225 问题
相似问题