有1些前沿的电子商务网站早已刚开始应用三d实体模型来展现产品并适用线上订制,而在其中书籍的展现是最为简易的1种,不用繁杂的模型全过程,应用照片和CSS3的1些转换便可完成更好的展现实际效果,简约而好用。
书籍的三d实体模型是全部产品中最为简易的,由于其实质上便是1个立方体(cube),只是带有封面/封底和左边封条。 因此要结构1个三d书籍展现,难题就被溶解为结构1个立方体+转动+照片情况。
1. 结构1个立方体
要建立1个立方体,最先大家必须建立1个虚似的3维视觉效果室内空间,这能够根据设定宽容器元素的perspective特性得到。
CSS Code拷贝內容到剪贴板
- .stage {
- width: 200px;
- height: 260px;
- perspective: 1000px;
- perspective-origin: center center;// 缺省值,可忽视
- }
上述编码把元素放在间距观查点1000px的地区(Z轴向),而且在X/Y轴向上垂直居中。
CSS Code拷贝內容到剪贴板
- <div class="stage">
- <div class="cube">
- <figure class="back"></figure>
- <figure class="top"></figure>
- <figure class="bottom"></figure>
- <figure class="left"></figure>
- <figure class="right"></figure>
- <figure class="front"></figure>
- </div>
- </div>
接着,大家在宽容器元素里边加上1个立方体元素,6个边(左右上下和前后左右),之因此应用figure,是由于必须适用贴图。
大家必须依据书籍的厚度和长宽来明确立方体各个面的座标部位,在本例中所用书籍实体模型(1本MySQL书)的肯定厚度为18.2px,高宽比260px,宽度197.6px。
那末依据简易的几何图形专业知识,前后左右面间距立方体管理中心的间距为18.2/2=9.1px,在其中“后”元素必须再旋转1下(即“背”以往)。
CSS Code拷贝內容到剪贴板
- .front {
- transform: translateZ(9.1px);
- }
- .back {
- transform: rotateY(180deg) translateZ(9.1px);
- }
用相近的测算方式,大家能够把别的4条边置放(平移+转动转换)到各有的部位,从而组装成1个虚似的立方体。
CSS Code拷贝內容到剪贴板
- .front {
- transform: translateZ(9.1px);
- }
- .back {
- transform: rotateY(180deg) translateZ(9.1px);
- }
- .top {
- transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(⑻9.7px);
- width: 18.2px;
- height: 197.6px;
- }
- .bottombottom {
- transform: rotateX(⑼0deg) rotateZ(90deg) translateZ(161.2px) translateY(⑻9.7px);
- }
- .left {
- transform: rotateY(⑼0deg) translateZ(9.1px);
- width: 18.2px;
- }
- .rightright {
- transform: rotateY(90deg) translateZ(188.5px);
- width: 18.2px;
- }
2. 加上封面
接着大家给前后左右和左边面元素加上情况图(可使用1张图,随后从不一样的部位截取),给别的3个面加上情况色调,并给“底”面加上黑影实际效果:
CSS Code拷贝內容到剪贴板
- .front {
- transform: translateZ(9.1px);
- background: url("//wow.techbrood.com/uploads/160301/mysql.png") top rightright;
- background-size: auto 100%;
- }
- .back {
- transform: rotateY(180deg) translateZ(9.1px);
- background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left;
- background-size: auto 100%;
- }
- .top {
- transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(⑻9.7px);
- background: #fafafa;
- width: 18.2px;
- height: 197.6px;
- }
- .bottombottom {
- transform: rotateX(⑼0deg) rotateZ(90deg) translateZ(161.2px) translateY(⑻9.7px);
- background: #ccc;
- width: 18.2px;
- height: 197.6px;
- -webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75));
- }
- .left {
- transform: rotateY(⑼0deg) translateZ(9.1px);
- background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center;
- background-size: auto 100%;
- width: 18.2px;
- }
- .rightright {
- transform: rotateY(90deg) translateZ(188.5px);
- background: #ddd;
- background-size: auto 100%;
- width: 18.2px;
- }
这样大家就完成了1个真实的三d书籍视觉效果实体模型。
3. 加上转动动漫
这个较为简易,应用rotateY方式便可以。
CSS Code拷贝內容到剪贴板
- @-webkit-keyframes rotate {
- 0% {
- transform: rotateY(0) translateX(⑴8.2px);
- }
- 100% {
- transform: rotateY(360deg) translateX(⑴8.2px);
- }
- }
最后的实际效果图以下:
有关CSS3完成三d转动书籍 的所有內容网编就给大伙儿详细介绍这么多,期待对大伙儿有一定的协助!
原文:http://blog.csdn.net/iefreer/article/details/50931478