HTML5 and CSS3 code to implement 3D display of product information-H5 Tutorial-php.cn

HTML5 and CSS3 code to implement 3D display of product information

不言

Release： 2018-06-28 14:09:56

Original

4154 people have browsed it

This article introduces the html5 product display shopping guide special effect, which is a 3D three-dimensional style of product information. It is of great practical value. Friends in need can refer to it.

Strengthen the usage of perspective and transform:translateZ. Traditional product display may not attract users' attention very well, but if you add appropriate 3D elements to the display, ~ maybe the effect will be good ~

Rendering:

Explanation: This idea is not my idea, ha~ I imitate others, the idea should be from w3cplus. Of course, the point is to teach you how to do it, just like a high imitation~

First of all, let’s teach you how to use CSS3 to make a cube:

Zaimu Before CSS, such a cube should be difficult to make~ Well, I think it is difficult~

html:

<body>  
  
  
<p class="wapper">  
    <p class="cube">  
        <p class="side  front">1</p>  
        <p class="side   back">6</p>  
        <p class="side  right">4</p>  
        <p class="side   left">3</p>  
        <p class="side    top">5</p>  
        <p class="side bottom">2</p>  
    </p>  
</p>  
  
</body>

Copy after login

##wapper is The stage of this effect is to set the perspective element. If multiple elements share a stage, then the effect of all the elements observed from one line of sight is different, which is equivalent to us standing in a row tilted at 45 degrees under normal circumstances. In front of the door, each door has a different angle to our line of sight; p#cube represents a cube, and the 6 p's represent each face.

p#cube sets transform-style:preserve-3d, and then sets rotate and translateZ for each element

Now all the faces overlap on the same plane, we let:

Move the font forward by half the side length (translateZ(50px)) in the Z-axis direction, which is 50px;

Back first rotate 180 degrees around the Y-axis so that the font is facing the outside, and then translateZ (50px), because it has been rotated 180 degrees at this time, so tanslateZ is downward.

Similarly, other surfaces are rotated 90 degrees around the X-axis or Y-axis, and then 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);  
       }

Copy after login

For the display effect, you can adjust the perspective distance~

Okay, the cube is understood, then this product The display is not difficult; the two p's represent two sides, one is the picture and the other is the introduction. Initially, the introduction is rotated 90deg around the X-axis, and then when the mouse moves, the entire box is rotated 90deg around the x-axis. .

HTML:

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <meta charset="utf-8">  
    <link href="css/reset.css" rel="stylesheet" type="text/css">  
  
      
</head>  
<body>  
  
  
<ul id="content">  
  
    <li>  
        <p class="wrapper">  
            <img src="images/a.png">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
    </li>  
  
    <li>  
        <p class="wrapper">  
            <img src="images/b.jpeg">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
  
    </li>  
  
    <li>  
        <p class="wrapper">  
            <img src="images/c.png">  
            <span class="information">  
              <strong>Contact Form</strong> The easiest way to add a contact form to your shop.  
            </span>  
        </p>  
  
    </li>  
  
</ul>  
  
  
</body>  
</html>

Copy after login

CSS：

<style type="text/css">  
        body  
        {  
            font-family: Tahoma, Arial;  
        }  
  
        #content  
        {  
            margin: 100px auto 0;  
        }  
  
        #content li, #content .wrapper, #content li img, #content li span  
        {  
            width: 310px;  
            height: 100px;  
        }  
  
        #content li  
        {  
            cursor: pointer;  
            -webkit-perspective: 4000px;  
            width: 310px;  
            height: 100px;  
            float: left;  
            margin-left: 60px;  
            /*box-shadow: 2px 2px 5px #888888;*/  
  
        }  
  
        #content .wrapper  
        {  
            position: relative;  
            -webkit-transform-style: preserve-3d;  
            -webkit-transition: -webkit-transform .6s;  
        }  
  
        #content li img  
        {  
            top: 0;  
            border-radius: 3px;  
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
            position: absolute;  
            -webkit-transform: translateZ(50px);  
            -webkit-transition: all .6s;  
        }  
  
        #content  li span  
        {  
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(236, 241, 244, 1)), color-stop(100%, rgba(190, 202, 217, 1)));  
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
            position: absolute;  
            -webkit-transform: rotateX(-90deg) translateZ(50px);  
            -webkit-transition: all .6s;  
            display: block;  
            top: 0;  
            text-align: left;  
            border-radius: 15px;  
            font-size: 12px;  
            padding: 10px;  
            width: 290px;  
            height: 80px;  
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);  
            box-shadow: none;  
        }  
  
        #content li span strong  
        {  
            display: block;  
            margin: .2em 0 .5em 0;  
            font-size: 20px;  
            font-family: "Oleo Script";  
        }  
  
        #content li:hover .wrapper  
        {  
            -webkit-transform: rotateX(95deg);  
        }  
  
        #content li:hover img  
        {  
            box-shadow: none;  
            border-radius: 15px;  
        }  
  
        #content li:hover span  
        {  
            box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);  
            border-radius: 3px;  
        }  
  
  
    </style>

Copy after login

CSS Basic It has been analyzed above. Let me explain here. It seems redundant that we have a p.wapper for every product, but it is not. Because we want each product to have a normal 90deg flip, so we cannot let all products To share a stage, we added a p.wapper to let it set transform-style: preverse-3d, and then set the stage effect perspective for each li. The final flip effect is on p.wapper.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

CSS3 three-dimensional deformation to achieve three-dimensional squares

CSS uses Sprites technology to achieve the effect of rounded corners

The above is the detailed content of HTML5 and CSS3 code to implement 3D display of product information. For more information, please follow other related articles on the PHP Chinese website!