CSS3 3D 特效_技术问答

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

CSS3 3D 特效

                
                liuyubobobo
            全栈工程师

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

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

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

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

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

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

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

全部评论问答未解决精华

时间差

挺好，讲的很清晰

0 1-2 CSS3中transition属性

2016-04-07

赵嘉依

试了一下翻页的写法，不执行啊。。。

0 3-2 JS部分

2016-03-29

German

前面说到，transform-origin.x轴是 left right 还有center。这里bottom，是咋回事哦~

1 3-1 创建3D动画效果结构部分

2016-03-27

蓝天吻

呵呵，写完实现效果之后，发现自己的水平真的提高啦

1 3-4 编程挑战

2016-03-25

ry836478606

最后这个凯，真是太棒了

0 3-2 JS部分

2016-03-23

最爱松露巧克力

为什么都显示不了

0 3-4 编程挑战

2016-03-20

charlotteeeeeeeee

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

2 3-2 JS部分

2016-03-18

charlotteeeeeeeee

var curIndex=1;
function next(){
if(curIndex==6){return;}
var curPage=document.getElementById("page"+curIndex);
curPage.style.webkitTransform="rotatex(-90deg)"
curIndex++;
var nextPage=document.getElementById("page"+curIndex);nextPage.style.webkitTransform="rotatex(0deg)"}

4 3-2 JS部分

2016-03-18

charlotteeeeeeeee

#page1{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform:rotatex(90deg);}
#op{text-align: center;
margin: 40px auto;}

2 3-2 JS部分

2016-03-18

charlotteeeeeeeee

.page{
width: 360px;
height: 360px;
padding: 20px;
background-color: #156;
color: #236;
font-size: 360px;
font-weight: bold;
line-height: 360px;
text-align: center;
position: absolute;
}

2 3-2 JS部分

2016-03-18

charlotteeeeeeeee

#my3dspace{
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow: hidden;}
#pagegroup{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform-style:preserve-3d;
position:relative;
}

2 3-2 JS部分

2016-03-18

charlotteeeeeeeee

看到很多同学说看不清，我贴上了源代码，方便大家学习（我用的是chrome浏览器）试过了，效果和老师一样。至于没有效果的同学，可能是某个地方敲错了英文（不要问我为什么知道），因为webkit好像是白体字（用的是sublime写的代码）不能检错，所以要格外注意，使用代码时，建议考虑浏览器兼容性。代码字数限制，我就只贴css和js部分了。见下条评论。

3 3-2 JS部分

2016-03-18