网站建设之教你使用CSS 3D轮转展示产品信息

网站建设之教你使用CSS 3D轮转展示产品信息

标签：网站建设 CSS 3D

有很多展示产品信息的方式，如鼠标悬停图片展示，甚至是弹出。在这里，我们将学习如何使用CSS 3D轮转展示产品信息。

成品

在谈论技术前，下面的图片是我们想要达到的结果，产品的形象是可见的，而该产品的信息被隐藏。当用户鼠标悬停产品图片上，他们都将在垂直向上的方向旋转，使产品图片隐藏起来，而展示出产品信息，看起来就像一个旋转的立方体。

 

 

技术

做这个翻转立方体，我们将用到的技术是从以前我们做过的（用css3和jquery做搜索框）。这有两个元素，前部和底部，前面是产品图片，底部是产品信息。

有两个元素包装它们，第一个命名为wrapper,用来设置透明度，旨在定义从用户角度到相对元素有多远，相对值小的将放在相对近的。第二个元素命 名为item并被wrapper包装，里面包含产品图片和信息，这个元素有一个悬停事件将其X轴旋转95度显示产品信息和隐藏图像。

标记和样式

每个产品有两种包装元素和一个单一的信息元素如前所述，下面是标记：

1. <div class="wrapper">  
2. <div class="item">  
3.     <img src="http://www.web0752.com/images/contact.png">  
4.     <span class="information">  
5.       <strong>Contact Formstrong> The easiest way to add a contact form to your shop.  
6.     span>  
7.   div>  
8. div>  
9.   
10.   

每个包装内联块显示屏,角度值4000px，item将有保留-3D变换风格，其子级保留其三维位置，当翻转时也有过渡属性。

1. .wrapper {  
2.   display: inline-block;  
3.   width: 310px;  
4.   height: 100px;  
5.   vertical-align: top;  
6.   margin: 1em 1.5em 2em 0;  
7.   cursor: pointer;  
8.   position: relative;  
9.   font-family: Tahoma, Arial;  
10.   perspective: 4000px;  
11. }  
12.   
13. .item {  
14.   height: 100px;  
15.   transform-style: preserve-3d;  
16.   transition: transform .6s;  
17. }  

产品形象和产品信息，将有过渡，他们都将改变其边界半径和阴影框值，当用户悬停，这个目标使过渡更优雅。

1. .item img {  
2.   display: block;  
3.   position: absolute;  
4.   top: 0;  
5.   border-radius: 3px;  
6.   box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
7.   transform: translateZ(50px);  
8.   transition: all .6s;  
9.   
10. }  
11.   
12. .item .information {  
13.   display: block;  
14.   position: absolute;  
15.   top: 0;  
16.   height: 80px;  
17.   width: 290px;  
18.   text-align: left;  
19.   border-radius: 15px;  
20.   padding: 10px;  
21.   font-size: 12px;  
22.   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);  
23.   box-shadow: none;  
24.   background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);  
25.   transform: rotateX(-90deg) translateZ(50px);  
26.   transition: all .6s;  
27.   
28. }  

And the last is when user hover our product, it will rotate the item element and change image and information’s border-radius and box-shadow.

最后，当用户悬停产品，它会旋转的item元素和变化图像和信息的边界半径和箱阴影。

1. .item:hover {  
2.   transform: translateZ(-50px) rotateX(95deg);  
3. }  
4.   
5.   .item:hover img {  
6.     box-shadow: none;  
7.     border-radius: 15px;  
8.   }  
9.   
10.   .item:hover .information {  
11.     box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
12.     border-radius: 3px;  
13.   }  

革命成功，战利品如下：

完成

完成了，这个立方体3D转换效果可以兼容部分流览器，我还添加使用Modernizr的检查浏览器功能的脚本检测。