|
[tr][td]向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。
demo地址：http://www.paulrhayes.com/experiments/cube-3d/ demo下载地址：animated-css3-cube.zip 下面我们开始介绍如何制作。 html： [size=3][color=#0000ff][/color] [color=#0000ff][/color] [color=#0000ff][/color] One face [color=#0000ff][/color] [color=#0000ff][/color] Up, down, left, right [color=#0000ff][/color] [color=#0000ff][/color] Lorem ipsum. [color=#0000ff][/color] [color=#0000ff][/color] New forms of navigation are fun. [color=#0000ff][/color] [color=#0000ff][/color] Rotating 3D cube [color=#0000ff][/color] [color=#0000ff][/color] More content [color=#0000ff][/color] [color=#0000ff][/color] [color=#0000ff][/color][/size] 上面的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： [size=3][color=#800000]#experiment [/color]{[color=#ff0000] -webkit-perspective[/color]:[color=#0000ff] 800[/color];[color=#ff0000] -moz-perspective[/color]:[color=#0000ff] 800[/color];[color=#ff0000] -o-perspective[/color]:[color=#0000ff] 800[/color];[color=#ff0000] perspective[/color]:[color=#0000ff] 800[/color];[color=#ff0000] -webkit-perspective-origin[/color]:[color=#0000ff] 50% 200px[/color];[color=#ff0000] -moz-perspective-origin[/color]:[color=#0000ff] 50% 200px[/color];[color=#ff0000] -o-perspective-origin[/color]:[color=#0000ff] 50% 200px[/color];[color=#ff0000] perspective-origin[/color]:[color=#0000ff] 50% 200px[/color];
} [/size]cube设置的属性中包含固定的宽度和高度，并将position设置为relative。固定的高度和宽度是必须的，这样cube中的元素才能在限定的区域内执行3d动画。如果将高度和宽度设置为100%，cube中的元素将在整个页面范围内运动。 transition用来设置动画相关的属性。transform-style: preserve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。 css： [size=3][color=#800000]#cube [/color]{[color=#ff0000] position[/color]:[color=#0000ff] relative[/color];[color=#ff0000] margin[/color]:[color=#0000ff] 100px auto[/color];[color=#ff0000] height[/color]:[color=#0000ff] 400px[/color];[color=#ff0000] width[/color]:[color=#0000ff] 400px[/color];[color=#ff0000] -webkit-transition[/color]:[color=#0000ff] -webkit-transform 2s linear[/color];[color=#ff0000] -moz-transition[/color]:[color=#0000ff] -moz-transform 2s linear[/color];[color=#ff0000] -o-transition[/color]:[color=#0000ff] -o-transform 2s linear[/color];[color=#ff0000] transition[/color]:[color=#0000ff] transform 2s linear[/color];[color=#ff0000] -webkit-transform-style[/color]:[color=#0000ff] preserve-3d[/color];[color=#ff0000] -moz-transform-style[/color]:[color=#0000ff] preserve-3d[/color];[color=#ff0000] -o-transform-style[/color]:[color=#0000ff] preserve-3d[/color];[color=#ff0000] transform-style[/color]:[color=#0000ff] preserve-3d[/color];
}[/size]接下来统一为立方体的6个面设置css属性。 css： [size=3][color=#800000].face [/color]{[color=#ff0000] position[/color]:[color=#0000ff] absolute[/color];[color=#ff0000] height[/color]:[color=#0000ff] 360px[/color];[color=#ff0000] width[/color]:[color=#0000ff] 360px[/color];[color=#ff0000] padding[/color]:[color=#0000ff] 20px[/color];[color=#ff0000] background-color[/color]:[color=#0000ff] rgba(50, 50, 50, 0.7)[/color];
}[/size]接下来但是设置6个面的3d相关属性，使用rotateX或者rotateY来实现立方体表面朝向的翻转，使用translateZ实现立方体表面在3维空间的位置移动。 css： [size=3][color=#800000]#cube .one [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] rotateX(90deg) translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] rotateX(90deg) translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] rotateX(90deg) translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] rotateX(90deg) translateZ(200px)[/color];
}[color=#800000]
#cube .two [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] translateZ(200px)[/color];
}[color=#800000]
#cube .three [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] rotateY(90deg) translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] rotateY(90deg) translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] rotateY(90deg) translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] rotateY(90deg) translateZ(200px)[/color];
}[color=#800000]
#cube .four [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] rotateY(180deg) translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] rotateY(180deg) translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] rotateY(180deg) translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] rotateY(180deg) translateZ(200px)[/color];
}[color=#800000]
#cube .five [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] rotateY(-90deg) translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] rotateY(-90deg) translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] rotateY(-90deg) translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] rotateY(-90deg) translateZ(200px)[/color];
}[color=#800000]
#cube .six [/color]{[color=#ff0000] -webkit-transform[/color]:[color=#0000ff] rotateX(-90deg) translateZ(200px)[/color];[color=#ff0000] -moz-transform[/color]:[color=#0000ff] rotateX(-90deg) translateZ(200px)[/color];[color=#ff0000] -o-transform[/color]:[color=#0000ff] rotateX(-90deg) translateZ(200px)[/color];[color=#ff0000] transform[/color]:[color=#0000ff] rotateX(-90deg) translateZ(200px)[/color];
}[/size]最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。 javascript： [size=3][color=#0000ff]var[/color] xAngle = 0, yAngle = 0;
document.addEventListener('keydown', [color=#0000ff]function[/color](e)
{ [color=#0000ff]switch[/color](e.keyCode) { [color=#0000ff]case[/color] 37: [color=#008000]//[/color][color=#008000] left[/color] yAngle -= 90; [color=#0000ff]break[/color]; [color=#0000ff]case[/color] 38: [color=#008000]//[/color][color=#008000] up[/color] xAngle += 90; [color=#0000ff]break[/color]; [color=#0000ff]case[/color] 39: [color=#008000]//[/color][color=#008000] right[/color] yAngle += 90; [color=#0000ff]break[/color]; [color=#0000ff]case[/color] 40: [color=#008000]//[/color][color=#008000] down[/color] xAngle -= 90; [color=#0000ff]break[/color]; }; $('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, [color=#0000ff]false[/color]); [/size]课程就讲到这里，接下来大家可以动手尝试一下。 原文地址：http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/ [/td][/tr] |
|
