-
昨天照着老师写的自己写了一遍，怎么都没有3d效果，今天经过一行代码一行代码的实验，终于找到问题所在：1.几个pagediv外面取消了一层div，3d效果就出来了，估计是因为perspective在最外层，而要实现3d动作的在第三层，第二层却是2d的 2.同时取消overflow-hidden，否则翻转还是在2d平面内 3.几个pagediv在写的时候要倒序，否则效果也不理想 4. perspective-origin设置为x方向50%，y方向100%，否则可以看到翻转下去的数字查看全部
-
要实现跟视频一样的效果，首先要清楚：-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的了查看全部
-
-webkit- -moz- -o-查看全部
-
perspective,perspective-orgin查看全部
-
perspective查看全部
-
transition有三个参数查看全部
-
perspective查看全部
-
transform-origin:调整旋转中心，默认正中心。 x轴：left center right， y轴：top，center，bottom， z轴：length：px;查看全部
-
-webkit-transform: translateZ 轴方向整体平移 \n -webkit-transform: rotateY(45deg) 以轴为圆心旋转 滑竿控件：<input type="range" min="-360"max="360" id="transtatex" value="0" class="reange-control" onchange="translateall()" /> html5中，input type="range"即是滑杆。查看全部
-
css3 翻页查看全部
-
transiton:过渡模式 ease ease-in ease-out ease-in-out inear 缓慢开始结束 缓慢开始 缓慢结束 匀速查看全部
-
transition过渡模式五种值选项查看全部
-
设置3D场景：-wiz-perspective:800;(表示窗口到三维部件的位移)：-wiz-perspective-origin:50% 50%（表示视觉位置）;查看全部
-
rotate cube查看全部
-
input type="range" 滑动条查看全部
举报
0/150
提交
取消