首先，先教大家利用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 属性是立即可用的。
在视频的元数据已加载后，其他属性才可用。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery