HTML5 + CSS3: 3D product information example, html5css3
Enhanced perspective and transform: translateZ usage. Traditional product display may not attract users' attention, but if you add appropriate 3D elements to the display ,~ Maybe the results are good ~
:
Note: This idea is not what I think, haha ~ The idea of imitating others should be on w3cplus. Of course, the focus is to teach everyone how to do it ~
First, we will teach you how to use CSS3 to create a cube:
Before the wood has CSS, it should be difficult to make such cubes ~ Well, I think it's very difficult ~
Html:
<body> <div class="wapper"> <div class="cube"> <div class="side front">1</div> <div class="side back">6</div> <div class="side right">4</div> <div class="side left">3</div> <div class="side top">5</div> <div class="side bottom">2</div> </div> </div> </body>
Wapper sets the perspective element. If multiple elements share a stage, the effect of the elements is different from the view, normally, we stand in front of a row of 45-degree doors. The angle of each door varies with our line of sight. div # cube represents a cube, then the six divs represent each side.
Div # cube sets transform-style: preserve-3d, then each element sets rotate and translateZ
Now all the faces overlap on the same plane. Let's make:
The distance from the front of the font, that is, moving half of the side length (translateZ (50px) in the zaxis is 50px;
Back first rotates 180 degrees around the Y axis, so that the font is external, and then translateZ (50px), because at this time it has been rotated 180 degrees, so tanslateZ is down,
Similarly, the other planes Rotate 90 degrees around the X or Y axis respectively, 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); }
For the display effect, you can adjust the perspective distance ~
Well, the cube understands, so there is no difficulty in displaying this product. two divs represent two sides, one being an image, and the other being an introduction. At the beginning, this section describes how to first rotate 90deg around the X axis, and then rotate the entire box around the X axis 90deg when the mouse moves.
HTML:
<!DOCTYPE html>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>CSS has basically been analyzed above. Here, we have made a div for no products. wapper seems redundant. In fact, it is not because we want every product to be flipped by 90deg. Therefore, we cannot share all the products on a stage, so we add a div. wapper asks him to set transform-style: preverse-3d, and then each li sets stage effect perspective separately. The final flip effect is actually on div. wapper.
Download source code
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
