CSS3 3D 特效_技术问答

首页免费课 CSS3 3D 特效问答

CSS3 3D 特效

                
                liuyubobobo
            全栈工程师

                    查看讲师更多课程 
                    liuyubobobo讲师的其他课程
                
算法与数据结构（C++版） 面试/评级的算法复习技能包
实战·中级·11139

                                                                                                                                    ￥166.00
                                            
玩转算法面试-- Leetcode真题分门别类讲解
实战·中级·7342

                                                                                                                                    ￥266.00
                                            
 7个经典应用诠释Java算法精髓
实战·中级·1852

                                                                                                                                    ￥69.00
                                            
Python3入门机器学习&nbsp;经典算法与应用&nbsp;&nbsp;
实战·中级·5753

                                                                                                                                    ￥499.00
                                            
结合编程学数学 专为程序员设计的线性代数
实战·初级·3342

                                                                                                                                    ￥348.00
                                            
玩转算法系列--图论精讲（Java版）
实战·中级·1570

                                                                                                                                    ￥348.00
                                            
                难度中级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.70
                            206人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

慕九州4739172

.experiment{

width:400px;
height:200px;
background-color:#0fc;
border:2px solid #000;
margin:100px 400px;
animation:change 4s linear .5s both;
}
.page{perspective:1000px;perspective-origin:200px 200px;}

@keyframes change{
100%{transform:rotateY(-180deg);transform-origin:left;}
}
其实火狐只需要这样就可以3D了

0 2-2 实际创建3D场景

2016-11-27

火狐上到底可不可以啊？

最赞回答 / yclycl

-webkit-perspective:800px;-moz-perspective:800px;perspective:800px;

2 回答 1049 浏览 2-2 实际创建3D场景

2016-11-25

慕九州4739172

#experiment{
-webkit-perspective:800;
-moz-perspective:800;
perspective:800;
-webkit-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
-moz-transform-style:-webkit-preserve-3d;
transform-style:preserve-3d;
}
火狐没有效果吗？

1 2-2 实际创建3D场景

2016-11-25

求指教，为啥我做的没效果呀

最新回答 / 郭清萍3147421

首先你的页面显示就有问题，style中num的样式是写给谁的呢，显然你是要给每一个页面的，那么就要写给每个页面的class

2 回答 780 浏览 3-2 JS部分

2016-11-25

南琴一虹

将旋转轴移到bottom后，数字1用rotate(-90deg)却不能让它消失？（还是出现在屏幕中）

3 3-2 JS部分

2016-11-23

一只菌

课程挺不错很详细,不过就是必须用webkit内核的浏览器,火狐表示压力很大.

2016-11-18

一只菌

W3C官方说法:

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

0 2-2 实际创建3D场景

2016-11-18

慕仙5556764

为什么跟视频里的不一样，最后的6会出现在1的下面，请问怎么解决？

0 3-2 JS部分

2016-11-16

sunshine12

完全照着写确实有问题啊。1下去了2上不来

0 3-2 JS部分

2016-11-14

会飞的小飞象

照着打没效果，多半是单词写错了

1 3-2 JS部分

2016-11-14

会飞的小飞象

我用了-webkit在火狐中也有效果
现在浏览器的功能越来越强大了

0 3-2 JS部分

2016-11-14

会飞的小飞象

画质太模糊，高清的也有些看不清楚代码

2 2-3 translate属性

2016-11-14

会飞的小飞象

还不错
就是属性单词太长

0 2-2 实际创建3D场景

2016-11-14

Yinsion_Nie

我自己不参考别人的代码，是完全不知道怎么实现这个效果。看了同学代码里面贴的代码，有些很复杂，有些很简单，不同的人有不同的思路。但是，我认为能够将复杂的效果用简单的代码实现出来，就很了不起。

1 3-4 编程挑战

2016-11-14

这个能用纯css3 实现吗如果能有人能提供代码吗

最新回答 / 慕粉3727206

var curIndex = 1 ; function prev() { if(curIndex == 1) return; var curPage = document.getElementById("page" + curIndex); curPage.style.webkitTransform = "rotateX(90deg)"; curIndex--; var prevPage = document.getElementById("page" + curIndex); ...

2 回答 904 浏览 3-2 JS部分

2016-11-12

Yinsion_Nie

第三题，“右边沿向屏幕内旋转”，说明旋转是左右旋转的，而且绕着竖直方向旋转，所以是rotateY(),因为是向右旋转45度，所以是正值，45deg，所以答案选C。
不明白的同学可以再看一次视频，注意老师在滑动滑块的时候，div块的旋转方向。

1 2-5 练习题

2016-11-12

首页上一页 7 8 9 10 11 12 13 下一页尾页

开始学习

课程须知: 本课程适合有html、css基础知识的同学进阶学习

老师告诉你能学到什么？: 如何使用CSS3来创建一个3D的动画效果

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS3 3D 特效

火狐上到底可不可以啊？

求指教，为啥我做的没效果呀

这个 能用纯css3 实现吗 如果能 有人能提供代码吗

这个能用纯css3 实现吗如果能有人能提供代码吗