Enhance the usage of Perspective and Transform: Translatez. Traditional product display may not attract the attention of users well, but if appropriate 3D elements are added to the display, maybe the effect is good ~
Effect map:
Explain: This creativity is not what I think, ha ~ imitating others, creativity should be on W3CPlus. Of course, the point is to teach everyone how to do it, just be a high imitation ~
First of all, teach you to use CSS3 to make a square:
Before there is CSS, such a cube should be difficult to make ~ Well, I think it is difficult ~
html:
<body> <div class = wapper> <div class = cube> <div class = sign from> 1 </div> <div class = size back> 6 </div> <div class = sign right> 4 </div </div > <div class = size left> 3 </div> <div class = size top> 5 </div> <div class = sign bottom> 2 </div> </div> </body>
The stage of WAPPER for this effect, that is, setting the element of Perspective. If multiple elements share a stage, the effect of the element from a sight is different. In front of the door, each door is different for us; DIV#Cube represents a cube, and then 6 div represents each side.
DIV#Cube settings transform-style: preserve-3D, and then set Rotate and translatez each element
Now all the noodles are overlapped on the same plane, we give up:
FONT moves forward, the distance of the semi -margin (50px) of the Z -axis direction is 50px;
Back first rotates 180 degrees around the Y axis, so that the font is to the outside, and then translatez (50px), because it has been rotated 180 degrees at this time, so tanslatez is downward, and it is down, and it is down.
In the same way, the other plane rotates 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;} .Cub. e {positive: related; width : 100px; -webkit-transform: Rotatex (-40Deg) rotatey (32DEG); -webkit-Transform-Style: Preserve-3D;} .side {Text-Align: 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 -trarsForm: translatez (50p x);} .top {-webkit -transform: rotatex (90Deg) translatez (50px);}. Right {-webkit -transform: Rotatey (90deg) translatez (50px);} .let {-webkit -trr Ansform: Rotatey (-90Deg) Translatez (50px);} .bottom {-webkit-transform: rotatex (-90Deg) translatez (50px);} .back {-webkit-transform: Rotatey (-180Deg) (50px);}For the display effect, you can adjust the distance of Perspective ~
Well, the cube is understood, so this product display is not difficult; the two DIV represent two places, one is the picture, and the other is the introduction. Rotate the entire box around the X -axis 90DEG.
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> <div class = wrapper> <IMG SRC = Images/A.Png> <span class = information> <strong> Contract </strong> The Easiet Way A Act FORM TO Your Shop. </SPAN> </DIV> </li> <li> <div class = wrapper> <IMG SRC = Images/B.JPEG> <span class = information> <strong> Contract form </strong> the EASIEST WAY to add a contal form to your shop. </span> </div> </li> <li> <div class = wrapper> <IMG SRC = Images/C.PNG> <span class = information> <strong > Contract Form </strong> The Easiest Way to add a contact form to your shop. </Span> </div> </li> </body> </html>
CSS:
<STYLE TYPE = Text/CSS> Body {FONT-FAMILY: TAHOMA, Arial;} #Content {Margin: 100px Auto 0;} #Content Li, #Content .wrapper, #Content li img, #contententit li span {width: 310px; height: 100px;} #Content Li {Cursor: Pointer; -webkit-Peerspective: 4000px; Width: 310px; Height: 100px; Float: left; MARGIN-Left: 60px; /*Box-shadow: 2px 2px 5px # 888888;*/} #Content .wrapper {posity: related: -webkit-transform-style: preserve-3D; -webkit-transitude: -webkit-transform .6s;} #Content L I 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;} test 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 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 1 1, 117, 1 ))); Text-shadow: 1px 1px 1px RGBA (255, 255, 255, 0.5); Position: absolute; -webkit-Transform: Rotatex (-90Deg) (50px); signion: all .6s; Display: block; TOP: 0; Text-Align: left; Border-Radius: 15px; FONT-SIZE: 12px; padding: 10px; width: 290px; height: 80px; text-shadow: 1px 1 px 1px RGBA (255, 255 , 255, 0.5); Box-shadow: none;} #Content Li span Strong {display: block; margin: .2em 0.5em 0; font-siZe: 20px; T li: Hover .wrapper {-webkit-transform: rotatex (95Deg);} #Content Li: Hover img {box-shadow: none; border-radius: 15px;} #Content Li: Hover span {box-s Hadow: 0px 3px 8px RGBA (0, 0, 0, 0.3); Border-Radius: 3px;} </style>CSS has basically been analyzed above. It is explained here that we seem to be superfluous for the unprecedented product. In fact, it is not because we hope that every product is a normal 90DEG flip, so we can’t let all all of them allow all The product sharing stage, so we added a div.Wapper for him to set the Transform-Syle: Preverse-3D, and then set the stage effect Perspective each li. The final flip effect is really on div.wapper.
Source code click to download
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.