time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】18、CSS3创建动态3D立方体教程

【HTML5实践教程】18、CSS3创建动态3D立方体教程

时间:2013-01-05 23:43 点击:3090次 字体:[ ]




   在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。

  demo地址:http://www.paulrhayes.com/experiments/cube-3d/

  demo下载地址:animated-css3-cube.zip

 

  下面我们开始介绍如何制作。

  html:

  1. <div id="experiment"> 
  2.         <div id="cube"> 
  3.                 <div class="face one"> 
  4.                         One face 
  5.                 </div> 
  6.                 <div class="face two"> 
  7.                         Up, down, left, right 
  8.                 </div> 
  9.                 <div class="face three"> 
  10.                         Lorem ipsum. 
  11.                 </div> 
  12.                 <div class="face four"> 
  13.                         New forms of navigation are fun. 
  14.                 </div> 
  15.                 <div class="face five"> 
  16.                         Rotating 3D cube 
  17.                 </div> 
  18.                 <div class="face six"> 
  19.                         More content 
  20.                 </div> 
  21.         </div> 
  22. </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:

  1. #experiment { 
  2.     -webkit-perspective: 800
  3.     -moz-perspective: 800
  4.     -o-perspective: 800
  5.     perspective: 800
  6.     -webkit-perspective-origin: 50% 200px
  7.     -moz-perspective-origin: 50% 200px
  8.     -o-perspective-origin: 50% 200px
  9.     perspective-origin: 50% 200px



本文地址 : http://www.fengfly.com/plus/view-211354-1.html
标签: CSS3 HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: