为了账号安全,请及时绑定邮箱和手机立即绑定
改一下前缀就没事了 谢谢评论区的大佬
为什么我的这两行代码会报错呢
-webkit-transform-style:-webkit-preserve-3d;
-webkit-transform: rtoateX(45deg);
transition translate transform 傻傻分不清楚
-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
demo中 的 onchange时间 不是实时监听执行的 改成 onmousemove 属性就会想视频中一样直接拖动就会马上发生变化而不是拖动完了 才发生变化!~ 坑已踩过顶起来让更多人看到!~
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-
ghd
很多同学说运行不成功,我把本课的三个例子都做了,在一个页面中,大家可以看看 .
https://github.com/gonmin/css-3d-imooc
小董君同学:2和3面,5和6面的transform-origin属性值互换;4面向反向平移。让每一面的数字看起来都是朝向立方体的外面。
大家加油。
课程须知
本课程适合有html、css基础知识的同学进阶学习
老师告诉你能学到什么?
如何使用CSS3来创建一个3D的动画效果

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消