为了账号安全,请及时绑定邮箱和手机立即绑定
笑死了,Firefox的渲染顺序和Chrome的不一样,先出8再出7最后是1,这动画绝对笑死你

最赞回答 / 某位
-webkit-transform: rotate(90deg);-webkit-transform:rotateX(90deg);
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;

我细思了两天,左看右看代码没有任何问题,就就就!!!因为没写-webkit- !郁闷啊!/笑哭
rotateX(0deg)中的0deg是相当于最开始的状态没有变化,但是老师在做2-5的样式的时候改变了他们的位置使他们躺下去,后来设置rotateX(0deg)是为了恢复原来的状态
用360浏览器打开没效果哦
刚发错了
我的代码笔记 共享一下给大家哈
http://weiruojian.com/CSS3/3Dcube.html 这个才是
我的代码笔记 共享一下给大家哈
http://test5.com/CSS3/3Dcube.html
view-source:http://test5.com/CSS3/3Dcube.html

最新回答 / 慕标5206426
我的理解是旋转中心,就是对于一个二维图形,以那一条边进行旋转,那么这条边就是旋转中心

最新回答 / 慕前端1455417
不好意思,已经找到了。抱歉啦
demo中 的 onchange时间 不是实时监听执行的 改成 onmousemove 属性就会想视频中一样直接拖动就会马上发生变化而不是拖动完了 才发生变化!~ 坑已踩过顶起来让更多人看到!~

最新回答 / 请你不要再打扰她了啊
设置这个就是为了取消原来旋转90°的状态
css样式里可以直接这么写
.page{
......
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform:rotateX(90deg);
}
这样可以省掉一部分的代码,另外-webkit-transform-style:-webkit-preserve-3d;换成这个会显示1下面躺着个6
大家注意了原原本本的写,如果没有效果,就把perspective: 800;改成 perspective: 800px; 在数字后面加个px,我也不知道视频中老师为什么不写。(可能是软件不同吧)
老师用的是谷歌浏览器,用别的浏览器得更换内核。。。。
firefox:-moz-
opera:-o-
chrome:-webkit-
IE:-ms-
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果
意见反馈 帮助中心 APP下载
官方微信
友情提示:

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消