-
- 精慕门3383071 2017-04-06
- 翻转事件
-
截图0赞 · 0采集
-
- 狐狸的小狮子 2016-11-18
- js部分
-
截图0赞 · 0采集
-
- _莫忘初衷_ 2016-11-03
- 用的chrome，不加webkit前缀也可以运行，按照老师写法出现bug的情况： 1.没有3d效果，只是上下缩动，在perspective-origin那里给800加上px单位； 2.翻页后，之前的卡片有部分会显示在下方，请在page的css里加上backface-visibility:hidden;
- 4赞 · 2采集
-
- 影子世界 2016-07-28
- css3中的动画属性 transition 使网页的一个属性值平滑过度到另一个值 animation 可在不使用js的情况下实现复杂酷炫的动画效果 transition过度模式： ease /ease-in-out 缓慢开始，缓慢结束 linear 匀速 ease-in 缓慢开始 ease-out 缓慢结束 设置3D场景 perspective属性：观察距离，如取值"800"，代表物体离屏幕距离800 perspective-origin属性：观察视点，如取值"50% 50%"，代表从物体中心观看物体 使用transform属性调整元素 - translate translateX( x px) translateY( y px) translateZ( z px) - rotate rotateX( x deg) rotateY( y deg) rotateZ( z deg) 因为transform支持二维属性，所以需要告诉浏览器在3D场景中进行操作， 即增加一行代码：-webkit-transform-style:-webkit-preserve-3d [ 收起全文 ]
- 0赞 · 0采集
-
- new_object_ 2016-06-12
- css3中的动画属性 transition 使网页的一个属性值平滑过度到另一个值 animation 可在不使用js的情况下实现复杂酷炫的动画效果 transition过度模式： ease /ease-in-out 缓慢开始，缓慢结束 linear 匀速 ease-in 缓慢开始 ease-out 缓慢结束 设置3D场景 perspective属性：观察距离，如取值"800"，代表物体离屏幕距离800 perspective-origin属性：观察视点，如取值"50% 50%"，代表从物体中心观看物体 使用transform属性调整元素 - translate translateX( x px) translateY( y px) translateZ( z px) - rotate rotateX( x deg) rotateY( y deg) rotateZ( z deg) 因为transform支持二维属性，所以需要告诉浏览器在3D场景中进行操作， 即增加一行代码：-webkit-transform-style:-webkit-preserve-3d
- 0赞 · 0采集
-
- gaoxinmiao 2016-04-22
- 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)"; }
- 0赞 · 0采集
-
- gaoxinmiao 2016-04-22
- 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)"; }
- 0赞 · 0采集
-
- 晴书文文 2016-04-16
- 调用ID page所以要加个id
-
截图0赞 · 0采集
-
- zyf94721 2016-03-21
- js部分
-
截图0赞 · 0采集
-
- 凝雨 2016-02-01
- 3D翻页
-
截图0赞 · 0采集
-
- 梦想的天空 2015-11-24
- 、rotateX中deg是一个页面旋转后的位置，与X轴所成的角度，而并不是这个页面在这个过程中转了多少度。 2、JS中-webkit-transform的写法：curPage.style.webkitTransform
- 0赞 · 3采集
-
- 交界的月光 2015-11-02
- 昨天照着老师写的自己写了一遍，怎么都没有3d效果，今天经过一行代码一行代码的实验，终于找到问题所在：1.几个pagediv外面取消了一层div，3d效果就出来了，估计是因为perspective在最外层，而要实现3d动作的在第三层，第二层却是2d的 2.同时取消overflow-hidden，否则翻转还是在2d平面内 3.几个pagediv在写的时候要倒序，否则效果也不理想 4. perspective-origin设置为x方向50%，y方向100%，否则可以看到翻转下去的数字
- 3赞 · 8采集
-
- 交界的月光 2015-11-02
- 要实现跟视频一样的效果，首先要清楚：-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。例子中“#pagegroup”还有一个父级，在“my3dspace”设置“overflow: hidden”在我们翻转页面的时候，被翻过的页面就会被隐藏起来。但是不能在“#pagegroup”设置，因为设置了“overflow: hidden”，“page”就会变成是2d的了
- 1赞 · 2采集
-
- 致我们终将逝去的青春 2015-09-24
- 好
- 0赞 · 0采集
-
- baymax_1 2015-09-20
- 代码细节
-
截图0赞 · 0采集
-
- qaz2632652 2015-09-08
- 1、rotateX中deg是一个页面旋转后的位置，与X轴所成的角度，而并不是这个页面在这个过程中转了多少度。 2、JS中-webkit-transform的写法：curPage.style.webkitTransform
- 4赞 · 1采集
-
- qq_疯子_9 2015-08-23
- js
-
截图0赞 · 0采集
-
- enzoop 2015-08-19
- JS在3D制作中的应用
-
截图0赞 · 0采集
-
- 桥风L 2015-07-26
- 1、rotateX中deg是一个页面旋转后的位置，与X轴所成的角度，而并不是这个页面在这个过程中转了多少度。 2、JS中-webkit-transform的写法：curPage.style.webkitTransform
- 2赞 · 1采集
-
- 桥风L 2015-07-26
- 要实现跟视频一样的效果，首先要清楚：-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。例子中“#pagegroup”还有一个父级，在“my3dspace”设置“overflow: hidden”在我们翻转页面的时候，被翻过的页面就会被隐藏起来。但是不能在“#pagegroup”设置，因为设置了“overflow: hidden”，“page”就会变成是2d的了
- 2赞 · 1采集
-
- 墨西哥鸡味卷 2015-07-15
- -webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。
- 0赞 · 0采集
-
- EElili 2015-07-07
- 要实现跟视频一样的效果，首先要清楚：-webkit-perspective，-webkit-transform-style两个属性的使用，这两个属性的作用是他们的子集，例如视频提到的，我们要翻页的是“page”,“#pagegroup”是“page”的父级，那么这两个属性要在“#pagegroup”定义。而对3d对象“page”设置-webkit-transform-origin旋转中心和过渡-webkit-transition: -webkit-transform 1s linear。例子中“#pagegroup”还有一个父级，在“my3dspace”设置“overflow: hidden”在我们翻转页面的时候，被翻过的页面就会被隐藏起来。但是不能在“#pagegroup”设置，因为设置了“overflow: hidden”，“page”就会变成是2d的了
- 1赞 · 4采集
-
- sends 2015-07-03
- 能实现，但是我翻页后第二面不能立起来，还能看见后面一页是6的数字
- 0赞 · 0采集
-
- Carol_Li 2015-06-21
- 本来竖直时度数数值为0deg，向前翻滚的话，度数数值为负数，所以要平躺时，数值为－90deg。
- 0赞 · 0采集
-
- 霜花似雪 2015-06-09
- CSS3 3D 特效 1、rotateX中deg是一个页面旋转后的位置，与X轴所成的角度，而并不是这个页面在这个过程中转了多少度。 2、JS中-webkit-transform的写法：curPage.style.webkitTransform
- 0赞 · 1采集
-
- 小呵呵 2015-05-01
- curPage.style.webkitTransform="rotateX(-90deg)";
-
截图0赞 · 0采集
-
- 凤仪 2015-04-08
- CSS3 3D 特效 1、rotateX中deg是一个页面旋转后的位置，与X轴所成的角度，而并不是这个页面在这个过程中转了多少度。 2、JS中-webkit-transform的写法：curPage.style.webkitTransform
- 0赞 · 1采集
-
- orangecat 2015-03-28
- 照着视频写不出效果，找到原因了 昨天照着老师写的自己写了一遍，怎么都没有3d效果，今天经过一行代码一行代码的实验，终于找到问题所在：1.几个pagediv外面取消了一层div，3d效果就出来了，估计是因为perspective在最外层，而要实现3d动作的在第三层，第二层却是2d的 2.同时取消overflow-hidden，否则翻转还是在2d平面内 3.几个pagediv在写的时候要倒序，否则效果也不理想 4. perspective-origin设置为x方向50%，y方向100%，否则可以看到翻转下去的数字
- 0赞 · 5采集
-
- orangecat 2015-03-28
- deg是当前页面的最终角度
-
截图0赞 · 0采集
-
- 用户1198270 2015-02-12
- 源码和视频讲的怎么一样
- 0赞 · 0采集
数据加载中...