Today to share a CSS3 made the effect of the flop, the effect shown in the following picture, the effect of the use of this application in the album will be very cool. Oh, super cool AH.
One, HTML code:
Because it is CSS3 implementation, so you can see that there is no JS code. UL for a group of pictures, each Li has a a (because we want to click on the picture can jump), a contains two Div, one is the normal display (that is, display pictures), one is the picture after the rotation (that is, introduced).
<!doctype html>
Second, CSS3 code
I have already made a comment in some parts of it and it should be easy to understand.
#content ul{width:960px;
padding:60px 0;
margin:0 Auto;
} #content ul li{width:225px;
height:180px;
margin-right:20px;
Float:left;
#content ul li:last-child{margin-right:0; #content ul Li a{display:block;
height:180px; /* Set the view where the element is viewed: The Perspective property defines the distance of the 3D element from the view, in pixels.
This property allows you to change the view of the 3D element by changing the 3D element.
When you define a perspective property for an element, its child elements get a perspective effect, not the element itself.
* *-webkit-perspective:500px;
-moz-perspective:500px;
-ms-perspective:500px;
perspective:500px;
position:relative;
#content ul li a > div{top:0;
left:0;
width:100%;
height:180px;
Color: #fff;
/* Specifies how nested elements are rendered in 3D space.
* *-WEBKIT-TRANSFORM-STYLE:PRESERVE-3D;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
/* Hide the back of the rotated div element * * *-WEBKIT-BACKFACE-VISIBILITY:HIDDEN;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-webkit-transition:0.8s ease-in-out;
-moz-transition:0.8s ease-in-out;
-ms-transition:0.8s ease-in-out;
Position:absolute; } #content ul LI a div:first-child{-webkit-transform:rotatey (0);
-moz-transform:rotatey (0);
-ms-transform:rotatey (0);
Z-index:2;
#content ul li A:hover div:first-child{-webkit-transform:rotatey ( -180deg);
-moz-transform:rotatey ( -180DEG);
-ms-transform:rotatey ( -180DEG);
#content ul Li a div:last-child{-webkit-transform:rotatey (180deg);
-moz-transform:rotatey (180DEG);
-ms-transform:rotatey (180DEG);
Z-index:1; Background:url ('..
/images/bg.jpg ') no-repeat;
#content ul li A:hover div:last-child{-webkit-transform:rotatey (0);
-moz-transform:rotatey (0);
-ms-transform:rotatey (0);
Z-index:1;
#content ul Li a div h3{margin:0 auto 15px;
padding:15px 0;
width:200px;
height:16px;
line-height:16px;
font-size:14px;
Text-align:center;
border-bottom:1px #fff dashed; } #content ul li a div p{padding:0
10px;
font-size:12px;
Text-indent:2em;
line-height:18px;
}
Iii. Principle of realization
The default picture rotatey=0, the mouse pointing to rotatey=-180, negative, that is, counterclockwise rotation around the y axis, positive, then clockwise; the other two axes are the same; mouse pointing: Picture (Div:first-child), Rotate 180 degrees from 0 degrees counterclockwise to 180 degrees; introduction (Div:last-child) rotates 180 degrees counterclockwise from 180 degrees around the Y axis and reaches 0 degrees. Results in two counter-clockwise rotation. Some people may ask why the introduction is not 0 degrees, the note here, the introduction counter-clockwise rotation 180 degrees after the positive state, so when the times the picture is covered, the equivalent from the normal state clockwise rotation of 180 degrees, because the mouse points need to return to normal state.
Four, the source code downloads
Http://xiazai.jb51.net/201605/yuanma/CSS3_BaiduTieba_Flop%28jb51.net%29.rar
V. Summary
CSS3 offers a lot of new features such as transform, when we use these features, we may only be compatible with the new browser, the IE6, 7, 8 and so the old compatibility is not very good, but this is enough, such as the above example, in IE6, 7, 8 of these browsers do not show the effects, Display only pictures, not ugly, in other browsers for HTML5 and CSS3 compatible browsers, you can see the effects. Avoid the use of too much JS, but also to achieve in the new browser display cool effect.
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
