h5实现3d展示,html产品展示
加强透视和变换的使用：translateZ .传统的商品展示可能不能很好地吸引用户的注意力，但如果在展示中加入适当的3D元素，~可能效果会很好~
效果图：
说明：这个想法不是我想的那样，哈~模仿别人的，想法应该在w3cplus上。当然重点是教大家怎么做，就当是高仿吧~
首先，我们来教你如何用CSS3制作一个立方体：
在木头有CSS之前，做这样的立方体应该很难吧~嗯，我觉得很难~
html:
body Div class= wapper Div class= cube Div class= side front 1/Div Div class= side back 6/Div Div class= side right 4/Div Div class= side top 5/Div Div class= side bottom 2/Div/Div/body wapper是这个效果的舞台，也就是设置了透视的元素。如果多个元素共用一个舞台，从一个视线看，所有元素的效果都不一样，相当于正常情况下站在一排倾斜45度的门前。每扇门都是给我们看的。Div#cube代表一个立方体，然后6个Div代表每个面。
Div#cube设置transform-style:preserve-3d，然后为每个元素设置rotate和translateZ。
现在所有的面都重叠在同一平面上，我们让：
字体向前移动，也就是在z轴方向，移动的距离是边长的一半(translateZ(50px))，也就是50px；
Back先绕Y轴旋转180度，使字体向外，然后translateZ(50px)。因为此时它已经旋转了180度，tanslateZ是向下的，
同样，其他面分别绕X轴或Y轴旋转90度，然后translateZ(50px)
CSS:wa pper { margin:100px auto 0；宽度：100px高度：100px-WebKit-视角：1200px字体大小：50px字体粗细：粗体；颜色：# fff} .多维数据集{位置：相对；宽度：100px-WebKit-transform:rotateX(-40 deg)rotateY(32 deg)；-WebKit-transform-style:preserve-3d；} .side { text-align:center；行高：100px宽度：100px高度：100px背景：rgba(255，99，71，0.6)；边框：1px实心rgba(0，0，0，0.5)；位置：绝对；} .front {-WebKit-transform:translate z(50px)；} .top {-WebKit-transform:rotateX(90 deg)translate z(50px)；} .right {-WebKit-transform:rotateY(90 deg)translate z(50px)；} .left {-WebKit-transform:rotateY(-90 deg)translate z(50px)；} .bottom {-WebKit-transform:rotateX(-90 deg)translate z(50px)；} .back {-WebKit-transform:rotateY(-180 deg)translate z(50px)；}为了显示效果，可以调整透视的距离~
好吧，正方体懂，所以这个商品展示不难；两个div代表两张脸，一张是图片，一张是简介。开头介绍绕X轴旋转90度，然后鼠标移动，整个盒子绕X轴旋转90度。
HTML:
！DOCTYPE html html head title/title meta charset= utf-8 link href= CSS/reset。CSS rel= style sheet type= text/CSS /head body ul id= content Li div class= wrapper img src= images/a . png span class= information strong联系方式/strong向您的商店添加联系方式的最简单方法/span/div/Li Li div class= wrapper img src= images/b . JPEG span class= information strong联系方式/strong向您的商店添加联系方式的最简单方法span/div/Li Li div class= wrapper img src= images/c . png span class= information strong联系方式/strong向您的商店添加联系方式的最简单方法. span /div /li /ul /body /html CSS:
style type= text/CSS body { font-family:Tahoma，Arial } # content { margin:100px auto 0；} #内容李，#内容。包装，#content li img，# content Li span { width:310 px；高度：100像素} #内容Li { cursor:指针；-网络工具包-视角：4000像素宽度：310像素高度：100像素浮动：左；左边距：60px/* box-shadow:2px 2px 5px # 888888；*/} #内容。包装{位置：相对；-WebKit-transform-style:preserve-3d；-WebKit-转换：-WebKit-转换。6s；} # content Li img { top:0；边框半径：3pxbox-shadow: 0px 3px 8px rgba(0，0，0，0.3)；位置：绝对；-WebKit-transform:translate z(50px)；-网络工具包-过渡：所有。6s；} # content Li span { background:-WebKit-gradient(linear，左上，左下，color-stop(0%，rgba(236，241，244，1))、color-stop(100%，rgba(190，202，217，1)))；文-影：1px 1px 1px rgba(255，255，255，0.5)；位置：绝对；-WebKit-transform:rotateX(-90度)translate z(50px)；-网络工具包-过渡：所有。6s；显示：块；top:0；文本对齐：左对齐；边框半径：15px字体大小：12px填充：10px宽度：290像素高度：80px文-影：1px 1px 1px rgba(255，255，255，0.5)；箱形阴影：无；} # content Li span strong { display:block；边距：第二季第0集第五季第0集字体大小：20px字体系列："油彩字体";} #内容李：悬停wrapper {-WebKit-transform:rotateX(95度)；} # content Li:hover img { box-shadow:none；边框半径：15px } # content Li:hover span { box-shadow:0px 3px 8px rgba(0，0，0，0.3)；边框半径：3px}/样式半铸钢钢性铸铁(Cast Semi-Steel)基本在上面已经分析过了，这里说明一点，我们给没件商品弄了一个华普分部看似是多余，其实不是，因为我们希望每个商品都是正常的90度翻转，所以我们不能让所有的商品共享一个舞台，于是我们添加了一个华普分部让他设置变换样式：preverse-3d，然后每个里分别设置舞台效果视角。最终翻转效果实在华普分部上。
源码点击下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。