HTML5和CSS3实现3D展示商品信息的代码

  首先,先教大家利用CSS3制作一个正方体:
 
  在木有CSS前,这样的立方体,应该很难制作吧——嗯,我觉得很难——
 
  html:
 
  wapper为此效果的舞台,即设置perspective的元素,如果多个元素共享一个舞台,那么从一个视线观察所以的元素的效果是不一样的,就相当我们正常情况下,站在一排倾斜成45度的门前面,每个门对于我们视线来说,角度是不同的;p#cube代表一个立方体,然后6个p分别代表每个面。
 
  p#cube设置transform-style:preserve-3d,然后每个元素设置rotate和translateZ
 
  现在所有的面重叠在同一个平面上,我们分别让:
 
  font往前即Z轴方向移动半个边长(translateZ(50px))的距离即50px;
 
  back先绕Y轴旋转180度,这样让字体是对外的,然后translateZ(50px),因为此时已经旋转了180度,所以tanslateZ是向下的,
 
  同理,其他面分别绕X轴或者Y轴旋转90度,然后translateZ(50px)
 
  CSS:
 
  对于显示效果,可以调节perspective的距离——
 
  好了,立方体理解了,那么这个商品展示就没什么难度了;两个p分别代表两个面,一个是图片,一个是介绍,初始时,介绍绕X轴先旋转90deg,然后当鼠标移动时,将整个盒子绕x轴旋转90deg即可。
 
  HTML:
 
  CSS:
 
  CSS基本在上面已经分析过了,这里说明一点,我们给没件商品弄了一个p.wapper看似是多余,其实不是,因为我们希望每个商品都是正常的90deg翻转,所以我们不能让所有的商品共享一个舞台,于是我们添加了一个p.wapper让他设置transform-style:preverse-3d,然后每个li分别设置舞台效果perspective。最终翻转效果实在p.wapper上。
 
  以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注jquery中文网!
 
  相关推荐:
 
  CSS3三维变形实现立体方块
 
  CSS 使用Sprites技术实现圆角的效果
 
  以上就是HTML5和CSS3实现3D展示商品信息的代码的详细内容,更多请关注jQuery中文网其它相关文章!
 
  您可能感兴趣的文章:
 
  HTML5和CSS3实现3D展示商品信息的代码
 
  H5 C3如何展示3D效果的商品信息
 
  html5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)
 
  使用PHP和HTML5 FormData实现无刷新文件上传
 
  php网上商城购物车代码一例
 
  利用HTML5中的Canvas绘制笑脸的代码
 
  基于HTML5 WebGL实现的3D机房
 
  photoshop工业级电影调色让相机照片秒变银幕大片效果教程
 
  HTML5必读书籍
 
  H5可以用来干什么?
 
  这篇文章主要介绍了关于HTML5使用DOM进行自定义控制,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
 
  HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,下面与大家分享下使用Dom来进行自定义的一些操作和控制
 
  HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。
 
  当然效果不是很美观,若想好看的可以自己设置css样式等。
 
  需要注意的是在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。
 
  在视频的元数据已加载后,其他属性才可用。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61736.shtml

张贴在2