本文主要包含html5 css3网站实例,html5和css3实例教程,css3动画实例,html5和css3实例,html5 css3诱人的实例等相关知识,佚名 希望在学习及工作中可以帮助到您
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。
第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：
</div>- <body>
- <div id="outer">
- <div id="group">
- <div class="page" id="page1">.</div>
- <div class="page" id="page2">..</div>
- <div class="page" id="page3">...</div>
- <div class="page" id="page4">....</div>
- <div class="page" id="page5">.....</div>
- <div class="page" id="page6">......</div>
- </div>
- </div>
- </body>
在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div，表示色子的六个平面。
第二步，定义三维场景的css,代码如下：
</div>- #outer{
- /*定义视距*/
- -webkit-perspective:500px;
- -WebKit-perspective-origin: 50% 50%;
- -moz-perspective:500px;
- -moz-perspective-origin: 50% 50%;
- overflow: hidden;
- }
这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离，值越大看到的效果越远，值越小，看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形，第一个参数表示X轴方向，第二个参数表示Y轴方向，可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的，所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义，如下：
在css3中，X轴正方向向右，Y轴正方向向下，Z轴正方向由屏幕内伸向屏幕外，这和立体几何中的坐标系定义不同。
第三步，为id为group的div设置css属性，这个div主要是将色子的6个平面组合在一起，便于定义整体动画效果，代码如下：