当前位置：Gxlcms > html代码 > HTML5CSS3：3D展示商品信息示例

HTML5CSS3：3D展示商品信息示例

时间：2021-07-01 10:21:17 帮助过：38人阅读

强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力，但是如果在展示中添加适当的3D元素，~说不定效果不错哈~

效果图：



说明一下：这个创意不是我想的，哈~模仿别人的，创意应该是w3cplus上的。当然了，重点是教大家如何做，就当高仿了~

首先，先教大家利用CSS3制作一个正方体：



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

html:

  1. <body>  
  2.   
  3.   
  4. <p class="wapper">  
  5.     <p class="cube">  
  6.         <p class="side  front">1</p>  
  7.         <p class="side   back">6</p>  
  8.         <p class="side  right">4</p>  
  9.         <p class="side   left">3</p>  
  10.         <p class="side    top">5</p>  
  11.         <p class="side bottom">2</p>  
  12.     </p>  
  13. </p>  
  14.   
  15. </body>



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：

  1. .wapper  
  2.        {  
  3.            margin: 100px auto 0;  
  4.            width: 100px;  
  5.            height: 100px;  
  6.            -webkit-perspective: 1200px;  
  7.            font-size: 50px;  
  8.            font-weight: bold;  
  9.            color: #fff;  
  10.        }  
  11.   
  12.        .cube  
  13.        {  
  14.   
  15.            position: relative;  
  16.            width: 100px;  
  17.            -webkit-transform: rotateX(-40deg) rotateY(32deg);  
  18.            -webkit-transform-style: preserve-3d;  
  19.        }  
  20.   
  21.        .side  
  22.        {  
  23.            text-align: center;  
  24.            line-height: 100px;  
  25.            width: 100px;  
  26.            height: 100px;  
  27.            background: rgba(255, 99, 71, 0.6);  
  28.            border: 1px solid rgba(0, 0, 0, 0.5);  
  29.            position: absolute;  
  30.        }  
  31.   
  32.        .front  
  33.        {  
  34.            -webkit-transform: translateZ(50px);  
  35.        }  
  36.   
  37.        .top  
  38.        {  
  39.            -webkit-transform: rotateX(90deg) translateZ(50px);  
  40.        }  
  41.   
  42.        .right  
  43.        {  
  44.            -webkit-transform: rotateY(90deg) translateZ(50px);  
  45.        }  
  46.   
  47.        .left  
  48.        {  
  49.            -webkit-transform: rotateY(-90deg) translateZ(50px);  
  50.        }  
  51.   
  52.        .bottom  
  53.        {  
  54.            -webkit-transform: rotateX(-90deg) translateZ(50px);  
  55.        }  
  56.   
  57.        .back  
  58.        {  
  59.            -webkit-transform: rotateY(-180deg) translateZ(50px);  
  60.        }



对于显示效果，可以调节perspective的距离~

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

HTML:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8">  
  6.     <link href="css/reset.css" rel="stylesheet" type="text/css">  
  7.   
  8.       
  9. </head>  
  10. <body>  
  11.   
  12.   
  13. <ul id="content">  
  14.   
  15.     <li>  
  16.         <p class="wrapper">  
  17.             <img src="images/a.png">  
  18.             <span class="information">  
  19.               <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
  20.             </span>  
  21.         </p>  
  22.     </li>  
  23.   
  24.     <li>  
  25.         <p class="wrapper">  
  26.             <img src="images/b.jpeg">  
  27.             <span class="information">  
  28.               <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
  29.             </span>  
  30.         </p>  
  31.   
  32.     </li>  
  33.   
  34.     <li>  
  35.         <p class="wrapper">  
  36.             <img src="images/c.png">  
  37.             <span class="information">  
  38.               <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
  39.             </span>  
  40.         </p>  
  41.   
  42.     </li>  
  43.   
  44. </ul>  
  45.   
  46.   
  47. </body>  
  48. </html>



CSS：

  1. <style type="text/css">  
  2.         body  
  3.         {  
  4.             font-family: Tahoma, Arial;  
  5.         }  
  6.   
  7.         #content  
  8.         {  
  9.             margin: 100px auto 0;  
  10.         }  
  11.   
  12.         #content li, #content .wrapper, #content li img, #content li span  
  13.         {  
  14.             width: 310px;  
  15.             height: 100px;  
  16.         }  
  17.   
  18.         #content li  
  19.         {  
  20.             cursor: pointer;  
  21.             -webkit-perspective: 4000px;  
  22.             width: 310px;  
  23.             height: 100px;  
  24.             float: left;  
  25.             margin-left: 60px;  
  26.             /*box-shadow: 2px 2px 5px #888888;*/  
  27.   
  28.         }  
  29.   
  30.         #content .wrapper  
  31.         {  
  32.             position: relative;  
  33.             -webkit-transform-style: preserve-3d;  
  34.             -webkit-transition: -webkit-transform .6s;  
  35.         }  
  36.   
  37.         #content li img  
  38.         {  
  39.             top: 0;  
  40.             border-radius: 3px;  
  41.             box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
  42.             position: absolute;  
  43.             -webkit-transform: translateZ(50px);  
  44.             -webkit-transition: all .6s;  
  45.         }  
  46.   
  47.         #content  li span  
  48.         {  
  49.             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(236, 241, 244, 1)), color-stop(100%, rgba(190, 202, 217, 1)));  
  50.             text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
  51.             position: absolute;  
  52.             -webkit-transform: rotateX(-90deg) translateZ(50px);  
  53.             -webkit-transition: all .6s;  
  54.             display: block;  
  55.             top: 0;  
  56.             text-align: left;  
  57.             border-radius: 15px;  
  58.             font-size: 12px;  
  59.             padding: 10px;  
  60.             width: 290px;  
  61.             height: 80px;  
  62.             text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
  63.             box-shadow: none;  
  64.         }  
  65.   
  66.         #content li span strong  
  67.         {  
  68.             display: block;  
  69.             margin: .2em 0 .5em 0;  
  70.             font-size: 20px;  
  71.             font-family: "Oleo Script";  
  72.         }  
  73.   
  74.         #content li:hover .wrapper  
  75.         {  
  76.             -webkit-transform: rotateX(95deg);  
  77.         }  
  78.   
  79.         #content li:hover img  
  80.         {  
  81.             box-shadow: none;  
  82.             border-radius: 15px;  
  83.         }  
  84.   
  85.         #content li:hover span  
  86.         {  
  87.             box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
  88.             border-radius: 3px;  
  89.         }  
  90.   
  91.   
  92.     </style>



CSS基本在上面已经分析过了，这里说明一点，我们给没件商品弄了一个p.wapper看似是多余，其实不是，因为我们希望每个商品都是正常的90deg翻转，所以我们不能让所有的商品共享一个舞台，于是我们添加了一个p.wapper让他设置transform-style：preverse-3d，然后每个li分别设置舞台效果perspective。最终翻转效果实在p.wapper上。

源码点击下载

以上就是HTML5 CSS3：3D展示商品信息示例 的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！