Home > Developer > Web Develop
First of all thank W3cfuns Teacher ~
Today brings you a CSS3 produced by the flop effect, is the mouse moved to the element, feel can see the information behind the element. If you make a test of memory, poker game God horse, even to the girlfriend to write some words, put in the use of the example produced by the album can be tried, ha ~
：
Some of the CSS3 new properties used by the instance:
A,-webkit-perspective:800px;
Perspective (Perspective, Perspective): attributes define the distance, in pixels, of the 3D element from the view. This property allows you to change the 3D element view of the 3D element. Determines what you see as 2D transform or 3D transform.
b,-webkit-transform-style:preserve-3d;
The Transform-style property specifies how nested elements are rendered in 3D space. The default flat (flat), we have the effect, then select 3D.
c,-webkit-backface-visibility:hidden; Whether to show the appearance of the selection element after it is rotated to the back.
D,-webkit-transform:rotatey (0); the element rotates around the y-axis.
The above attributes first give everyone a perceptual understanding, read the examples and then savor these attributes, or baidu,google god horse.
Example:
Html:
<body><div id= "Content" > <ul> <li> <a href= "#" target= "_blank" > <div></div> <div>
It's pretty simple:UL for a group of pictures, each Li has a (because we want to click on the image can jump), a contains two Div, one is normal display (that is, display pictures), one is the picture rotated after the display (that is, introduction).
Css:
<link href= "Css/reset.css" rel= "stylesheet" type= "Text/css" > <style type= "text/css" > body { font-size:14px; Font-family:microsoft Yahei, Tahoma, Geneva, Sans-serif; Background: #111; } #content ul {width:960px; margin:150px Auto; padding:60px 0; } #content ul li {margin-right:20px; width:225px; height:180px; Float:left; } #content ul li:last-child {margin-right:0; } #content ul Li a {position:relative; Display:block; width:100%; height:100%; /* Stage (the parent container of the animated element) perspective*/-webkit-perspective:800px; -moz-perspective:800px; } #content ul Li a > div {position:absolute; left:0; height:0; Width:10%; height:100%; Color: #fff; /* Animated elements transform-style*/-webkit-transform-style:preserve-3d; -webkit-transition:. 8s Ease-in-out; /* Animate element behind set to hidden*/-webkit-backface-visibility:hidden; } #content ul Li a div:first-child {/* rotate around Y-axis */-WEBKIT-TRANSFO Rm:rotatey (0); Z-index:2; } #content ul Li a div:last-child {background:url ("images/bg.jpg") no-repeat 0 0; -webkit-transform:rotatey (180DEG); Z-index:1; } #content ul li a:hover div:first-child {-webkit-transform:rotatey ( -180deg); } #content ul li a:hover div:last-child {-webkit-transform:rotatey (0); } #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; } </style>
Well, the above CSS can be found in the article before the CSS properties.1, the most important is to understand rotatey, rotation around the y-axis, remember me in the HTML5 CSS3 exquisite case: The realization of VCD box personality Slide is also used to similar properties transform:rotate (2520DEG); using 2D rotation.
Rotatey literally rotates around the y-axis, someone must ask where the y-axis is:
The center point of the default rotation element is the center of rotation (which can be modified by Transform-origin ), the x, Y axes are on the graph, and the z axis is the arrow from the center outward (the arrow that the screen is pointing at your head).
In our example, the default image is rotatey=0, the mouse points to rotatey=-180, negative, that is, counterclockwise around the y axis, positive, or clockwise; the other two axes;
The core of our example is the mouse pointing: Picture (Div:first-child), from 0 degrees counterclockwise rotation 180 degrees from the Y axis to reach-180 degrees, Introduction (Div:last-child) from 180 degrees counterclockwise rotation 180 degrees from the Y axis to reach 0 degrees. Results in two counterclockwise rotations. Some people may ask why the introduction of the default is not 0 degrees, here Note that the introduction of counterclockwise rotation of 180 degrees after the positive state, so when the image is obscured, the equivalent of a clockwise rotation from the normal state of 180 degrees, because the mouse point needs to return to normal state.
Perspective, there is a technique for setting the stage (the parent element of the animation).
Transform-style to 3d change of course is 3d, nothing to say.
There are a lot of properties related to the 3d effect of CSS3, and there are plenty of opportunities for future examples to deliberately use the unused ~
Welcome everyone to advise ~ Yes, the example needs to run under Chrome, Firefox seems to support is not very good, since the use of chrome,firebug also rarely used ~ hehe ~
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
