为了账号安全,请及时绑定邮箱和手机立即绑定

最赞回答 / Russian_Achilles
  你翻上一页的的函数都是空的,什么都没写,怎么会有效果呢给你! function prev(){ if(curIndex==1) return; var curPage=document.getElementById("page"+curIndex); curPage.style.transform="rotateX(90deg)"; curIndex--; var prevPage=document.getElementById("page"+c...
视频代码太模糊了,超清的也都看的不清楚,有点难受
好!!!!!!!!!!
讲的很好,很认真!赞(≧▽≦)
~\(≧▽≦)/~
赞~\(≧▽≦)/~
字好小,清晰度不行啊
找到问题了,写错了,应该是-webkit-transform-origin
翻页的时候,明明是写的-webkit-perspective-origin: bottom;但是没有用,还是在对半的位置翻页,没有实现底部翻
很遗憾,我的代码照着写的,chrome下能翻页但是没有3d翻页的效果。检查后发现是因为transition监听不到transform的变化,所以去掉对transform的监听改为默认全部监听就好了,改的部分代码如下: -webkit-transition: 1s linear;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;

字数太多复制不过来,把只要是-webkit的都改成这样就行。
老师的只是加了 webkit 所以只在谷歌上有效果,我们其实要 -webkit-tansfrom -moz-transfrom -ms-transfrom -o-transfrom transfrom 这样有不加的 有加全的,这样就可以兼容了。

已采纳回答 / 慕粉3800451
 var index=document.getElementById("p"+index);变量定义重复了,换个名字,比如 var p =
讲的非常清晰,棒棒哒!
事实证明 backface-visibility:hidden 是不能少的 而且transform-style属性最好写在在展现元素的的父亲身上 这样可以避免父亲也出现preserve-3d
还是实时监听比较适合这个 demo
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消