探讨HTML5商品展示导购特效
电商火热得都快炸裂了，谁不关心哪个产品页面更能抓住眼珠子？老套的平面展示已经过时，HTML5像一扇神秘大门，打开了3D立体式商品展示这块全新的世界！接下来就让我告诉你如何在HTML5中使用perspective和transform:translateZ来搞定这个效果，给你展示它到底怎么弄。
来聊聊perspective和transform:translateZ咋用。
想让商品展示炫酷一点吗？小菜一碟，只需学会perspective和transform:translateZ。前者负责控制元素的观感，后者则能把物体拉近到Z轴上，营造出立体感。用得溜熟，页面元素立马炫炸天，好看得不要不要的！
模仿w3cplus上的创意
想学新东西？可以试试跟别人学！比如w3cplus这个社区，就很棒，里面好多人分享技术经验还有成功例子。我做的那张HTML5购物展示页就是参照了那个社区里的一些想法做成的。跟着别人的步骤走，然后加点自己的创意进去，这样我们才能真正理解并熟练运用这些技巧呀。
教大家如何制作一个CSS3正方体
1
6
4
3
5
2
你想学搞3D展示，首先得知道怎么用CSS3搭个正方体。以前可能觉得难，要算算术，还要用绘图工具，但现在不一样，有了CSS3里的transform属性，变得好简单！只要调整旋转、移动等属性，每个面的颜色、角度、位置啥的全都会自动搞定，最后直接组装就行了。
HTML5商品展示导购特效实现步骤
来吧咱们聊聊怎样用HTML5和CSS3做出炫酷的商品展示特效！第一步就是弄一个“舞台”元素（也叫“图层”），把它设置成你想要的透视角度。接下来，在舞台上拉扯出立方体每个面的元素，并且给他们分别加一些rotate和translateZ属性，这就让你的商品呈现出3D的感觉。
咱们可以给每张脸儿设置不同的转头角度和Z轴移动量，这样效果就会准！操作也不难，只需要调节每张脸儿朝向舞台元素的方向和距离。这样处理后，每个角度都会变得立体生动。而且，我们还能用不同的透视线条改变观察角度，让立方体会更加逼真哟~
定制商品信息展示页面
摆平正方体不难，但展示商品可就要考虑到排列方式了。给每件商品配上图片和说明。图片和文字分开摆放，调整好适当的滚动轴，再加上点互动效果，那个小方块就能跟着鼠标操控翻看。
.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);
}
在HTML代码中，让我们把每个产品变成单独的’li’列表项，再用’wrapper’包围住它，这样每个物品就会有自己的小天地。这还不够，还要为每个’li’sub-channel（即’wrapper’元素）设置不同的过渡透明度（’transition’属性）。这么做，当某个商品翻转时，其他商品就不会被干扰了，整个页面也显得干净利落多了哈～
总结与展望
这个文章看完，你就会明白如何用HTML5 做出炫酷的3D商品展示了！学到这个，你就可以轻松打造各种超赞的网页产品，让人惊艳不已
希望这篇文章对热爱前端或正在学习的朋友们有所帮助。如果有什么想法，别忘了留言
-
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.
。
评论0