介绍
小编给大家分享一下H5 + C3怎么展示3 d效果的商品信息,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
强化下的角度和变换:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3 d元素,~说不定效果不错哈~
效果图:
说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~
首先,先教大家利用CSS3制作一个正方体:
在木有CSS前,这样的立方体,应该很难制作吧~嗯,我觉得很难~ html:
& lt; body>
类& lt; p=皐apper"祝辞
类& lt; p=癱ube"祝辞
类& lt; p=癴ront"在1 & lt;/p>
类& lt; p=癰ack"在6 & lt;/p>
类& lt; p=皉ight"在4 & lt;/p>
类& lt; p=發eft"在3 & lt;/p>
类& lt; p=皌op"在5 & lt;/p>
类& lt; p=癰ottom"在2 & lt;/p>
& lt;/p>
& lt;/p>
& lt;/body> wap为此效果的舞台,即设置角度的元素,如果多个元素共享一个舞台,那么从一个视线观察所以的元素的效果是不一样的,就相当我们正常情况下,站在一排倾斜成45度的门前面,每个门对于我们视线来说,角度是不同的;p #立方体代表一个立方体,然后6个p分别代表每个面。
p #立方体设置传输格式:preserve-3d,然后每个元素设置旋转和translateZ
现在所有的面重叠在同一个平面上,我们分别让:
字体往前即Z轴方向移动半个边长(translateZ (50 px))的距离即50 px;
回来先绕Y轴旋转180度,这样让字体是对外的,然后translateZ (50 px),因为此时已经旋转了180度,所以tanslateZ是向下的,
同理,其他面分别绕X轴或者Y轴旋转90度,然后translateZ (50 px) CSS:
.wapper
｛
保证金:100 px汽车0;
宽度:100 px;
身高:100 px;
-webkit-perspective: 1200 px;
字体大小:50 px;
粗细:大胆的;
颜色:# fff;
}
.cube
｛
位置:相对;
宽度:100 px;
-webkit-transform: rotateX(-40度)rotateY(32度);
-webkit-transform-style: preserve-3d;
}
.side
｛
text-align:中心;
行高:100 px;
宽度:100 px;
身高:100 px;
背景:rgba (255、99、71、0.6);
边界:1 px固体rgba (0, 0, 0, 0.5);
位置:绝对的;
}
.front
｛
-webkit-transform: translateZ (50 px);
}
.top
｛
-webkit-transform: rotateX(90度)translateZ (50 px);
}
对不对
｛
-webkit-transform: rotateY(90度)translateZ (50 px);
}
.left
｛
-webkit-transform: rotateY(-90度)translateZ (50 px);
}
.bottom
｛
-webkit-transform: rotateX(-90度)translateZ (50 px);
}
.back
｛
-webkit-transform: rotateY(-180度)translateZ (50 px);
} 对于显示效果,可以调节角度的距离~
好了,立方体理解了,那么这个商品展示就没什么难度了;两个p分别代表两个面,一个是图片,一个是介绍,初始时,介绍绕X轴先旋转90度,然后当鼠标移动时,将整个盒子绕X轴旋转90度即可。HTML:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> & lt;/title>
& lt;元charset=皍tf-8"祝辞
& lt;链接的href=https://www.yisu.com/zixun/癱ss/reset.css”rel="样式表" type=" text/css ">
<李>
<强>联系人表单添加联系人表单的最简单的方法你的商店。
李
<李>
<强>联系人表单添加联系人表单的最简单的方法你的商店。
李
<李>
<强>联系人表单
