Home > Developer > Web Develop
Strengthen the use of perspective and Transform:translatez. Traditional product display may not be very good to attract the attention of users, but if the display to add the appropriate 3D elements, ~ Maybe the effect is good AH ~
：
Note: This idea is not what I think, ah ~ imitate others, creativity should be w3cplus on the. Of course, the point is to teach you how to do, as high imitation of the ~
First of all, we first teach you to make a cube using CSS3:
Before the wood has CSS, such a cube, it should be difficult to make it ~ well, I find it 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>
Div#cube set transform-style:preserve-3d, then each element is set rotate and Translatez
Now all the faces overlap on the same plane, and we let each:
The distance of the font moving half side length (Translatez (50px)) forward, i.e. Z axis, is 50px;
Back first rotation around the y axis 180 degrees, so that the font is external, and then Translatez (50px), because this time has been rotated 180 degrees, so Tanslatez is down,
Similarly, the other faces rotate 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); }
Well, the cube understands, then this product display is no difficulty; two div represents two faces, one is a picture, one is an introduction, the initial, the introduction of the x-axis rotation of 90deg first, and then when the mouse movement, the entire box around the x-axis rotation 90deg.
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-sto P (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 basically has been analyzed above, here to illustrate a point, We've got a div.wapper for a product. Seemingly redundant, not really, because we want each product is normal 90deg flip, so we can not let all the goods share a stage, so we added a div.wapper let him set Transform-style:preverse -3d, then each Li sets the stage effect perspective respectively. The final rollover effect is really div.wapper.
Well, I believe these examples, we have been able to use perspective and translatez to create some very cool three-dimensional effect, you are welcome to guide ~
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
