来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体,操作方法为：上下左右键，实现立方体的翻转旋转效果，特酷，本人看后，目瞪口呆，值得收藏于参考...
|
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体,操作方法为：上下左右键，实现立方体的翻转旋转效果，特酷，本人看后，目瞪口呆，值得收藏于参考
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 复制代码 代码如下:<div id="experiment"> <div id="cube"> <div class="face one"> One face </div> <div class="face two"> Up, down, left, right </div> <div class="face three"> Lorem ipsum. </div> <div class="face four"> New forms of navigation are fun. </div> <div class="face five"> Rotating 3D cube </div> <div class="face six"> More content </div> </div> </div> 上面的html中，class为face的6个div分别代表立方体的6个面，使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器，这两层都是必须的，少了任何一个，3d效果都出不来。 其中experiment起到镜头的作用。对他设置焦距，这样3d效果才能在内部元素上展示出来。 perspective属性定义z轴平面的深度，同时也定义了平面上面和下面元素的相对尺寸。总的来说，perspective值越小，物体越大，离你也越近；perspective值越大，物体越小，离你也越远。大家可以通过http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。 perspective-origin属性定义视角的原点。 css： 复制代码 代码如下:#experiment { -webkit-perspective: 800; -moz-perspective: 800; -o-perspective: 800; perspective: 800; -webkit-perspective-origin: 50% 200px; -moz-perspective-origin: 50% 200px; -o-perspective-origin: 50% 200px; perspective-origin: 50% 200px; } cube设置的属性中包含固定的宽度和高度，并将position设置为relative。固定的高度和宽度是必须的，这样cube中的元素才能在限定的区域内执行3d动画。如果将高度和宽度设置为100%，cube中的元素将在整个页面范围内运动。 transition用来设置动画相关的属性。transform-style: preserve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。 大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/，了解更多信息。 css： 复制代码 代码如下:#cube { position: relative; margin: 100px auto; height: 400px; width: 400px; -webkit-transition: -webkit-transform 2s linear; -moz-transition: -moz-transform 2s linear; -o-transition: -o-transform 2s linear; transition: transform 2s linear; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } 接下来统一为立方体的6个面设置css属性。 css： 复制代码 代码如下:.face { position: absolute; height: 360px; width: 360px; padding: 20px; background-color: rgba(50, 50, 50, 0.7); } 接下来但是设置6个面的3d相关属性，使用rotateX或者rotateY来实现立方体表面朝向的翻转，使用translateZ实现立方体表面在3维空间的位置移动。 css： 复制代码 代码如下:#cube .one { -webkit-transform: rotateX(90deg) translateZ(200px); -moz-transform: rotateX(90deg) translateZ(200px); -o-transform: rotateX(90deg) translateZ(200px); transform: rotateX(90deg) translateZ(200px); } #cube .two { -webkit-transform: translateZ(200px); -moz-transform: translateZ(200px); -o-transform: translateZ(200px); transform: translateZ(200px); } #cube .three { -webkit-transform: rotateY(90deg) translateZ(200px); -moz-transform: rotateY(90deg) translateZ(200px); -o-transform: rotateY(90deg) translateZ(200px); transform: rotateY(90deg) translateZ(200px); } #cube .four { -webkit-transform: rotateY(180deg) translateZ(200px); -moz-transform: rotateY(180deg) translateZ(200px); -o-transform: rotateY(180deg) translateZ(200px); transform: rotateY(180deg) translateZ(200px); } #cube .five { -webkit-transform: rotateY(-90deg) translateZ(200px); -moz-transform: rotateY(-90deg) translateZ(200px); -o-transform: rotateY(-90deg) translateZ(200px); transform: rotateY(-90deg) translateZ(200px); } #cube .six { -webkit-transform: rotateX(-90deg) translateZ(200px); -moz-transform: rotateX(-90deg) translateZ(200px); -o-transform: rotateX(-90deg) translateZ(200px); transform: rotateX(-90deg) translateZ(200px); } 最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。 javascript： 复制代码 代码如下:var xAngle = 0, yAngle = 0; document.addEventListener('keydown', function(e) { switch(e.keyCode) { case 37: // left yAngle -= 90; break; case 38: // up xAngle += 90; break; case 39: // right yAngle += 90; break; case 40: // down xAngle -= 90; break; }; $('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"; }, false); 课程就讲到这里，接下来大家可以动手尝试一下。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
