HTML5和CSS3实现3D展现商品信息的代码--百分百源码网

HTML5和CSS3实现3D展现商品信息的代码-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章介绍的是对于html5商品展现导购特效是一款3D立体样式的商品信息，非常拥有有用价值，需要的伴侣可以参照下。这篇文章介绍的是对于html5商品展现导购特效是一款3D立体样式的商品信息，非常拥有有用价值，需要的伴侣可以参照下。

强化下perspective和transform:translateZ的用途。传统的商品展现也许并不克不及非常不错的吸援用户的注意力，但是要是在展现中增加恰当的3D元素，~说不定结果不错哈~

结果图：

在木有CSS前，这样的立方体，应当很难制作吧~嗯，我觉得很难~

html:

wapper为此结果的舞台，即设定perspective的元素，要是多个元素同享一个舞台，那么从一个视线调查所以的元素的结果是不同的，就相当我们正常状况下，站在一排歪斜成45度的门前面，每个门关于我们视线来说，角度是不一样的；p#cube代表一个立方体，然后6个p离别代表每个面。

p#cube设定transform-style:preserve-3d，然后每个元素设定rotate和translateZ

此刻所有的面重叠在统一个平面上，我们离别让：

font往前即Z轴标的目的挪移半个边长（translateZ(50px)）的距离即50px；

back先绕Y轴扭转180度，这样让字体是对外的，然后translateZ(50px)，由于此时已经扭转了180度，所以tanslateZ是向下的，

同理，其他面离别绕X轴或者Y轴扭转90度，然后translateZ(50px)

CSS：

.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);  
       }

关于显示结果，可以调理perspective的距离~

好了，立方体了解了，那么这个商品展现就没什么难度了；两个p离别代表两个面，一个是图片，一个是介绍，初始时，介绍绕X轴先扭转90deg，然后当鼠标挪移时，将整个盒子绕x轴扭转90deg即可。

HTML:

  
  
  
      
      
      
  
      
  
  
  
  
  
  
      
          
              
              
              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.

CSS：

CSS根本在上面已经剖析过了，这里注明一点，我们给没件商品弄了一个p.wapper看似是余外，其实不是，由于我们但愿每个商品都是正常的90deg翻转，所以我们不克不及让所有的商品同享一个舞台，于是我们增加了一个p.wapper让他设定transform-style：preverse-3d，然后每个li离别设定舞台结果perspective。终究翻转结果实在p.wapper上。

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！

打赏