H5+C3怎样展现3D结果的商品信息-
强化下perspective和transform:translateZ的用途。传统的商品展现也许并不克不及非常不错的吸援用户的注意力，但是要是在展现中增加恰当的3D元素，~说不定结果不错哈~
结果图：
在木有CSS前，这样的立方体，应当很难制作吧~嗯，我觉得很难~
html:
1
6
4
3
5
2
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：
.wapper
{
margin: 100px auto 0;
width: 100px;
height: 100px;
-webkit-perspective: 1200px;
font-size: 50px;
font-weight: bold;
color: #fff;
}
.cube
{
position: relative;
width: 100px;
-webkit-transform: rotateX(-40deg) rotateY(32deg);
-webkit-transform-style: preserve-3d;
}
.side
{
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: rgba(255, 99, 71, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
position: absolute;
}
.front
{
-webkit-transform: translateZ(50px);
}
.top
{
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.right
{
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.left
{
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.bottom
{
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.back
{
-webkit-transform: rotateY(-180deg) translateZ(50px);
}关于显示结果，可以调理perspective的距离~
好了，立方体了解了，那么这个商品展现就没什么难度了；两个p离别代表两个面，一个是图片，一个是介绍，初始时，介绍绕X轴先扭转90deg，然后当鼠标挪移时，将整个盒子绕x轴扭转90deg即可。
HTML:
-
Contact Form The easiest way to add a contact form to your shop.
-
Contact Form The easiest way to add a contact form to your shop.
-
Contact Form The easiest way to add a contact form to your shop.
CSS：
CSS根本在上面已经剖析过了，这里注明一点，我们给没件商品弄了一个p.wapper看似是余外，其实不是，由于我们但愿每个商品都是正常的90deg翻转，所以我们不克不及让所有的商品同享一个舞台，于是我们增加了一个p.wapper让他设定transform-style：preverse-3d，然后每个li离别设定舞台结果perspective。终究翻转结果实在p.wapper上。
信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
举荐浏览：
H5怎样运用束缚验证API
postMessage实现跨域、跨窗口新闻通报
以上就是H5+C3怎样展现3D结果的商品信息的细致内容，更多请关注 百分百源码网 其它相干文章！
