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> <p id="content"> <ul> <li> <a href="#" target="_blank"> <p><img alt="" src="images/1.jpg"/></p> <p> <h3>Sweeping Naruto</h3> <p>The leading character in the Japanese cartoonist Kishimoto's work "Naruto". Because the body is sealed with the evil nine-tailed fox, he has no cold and eye and discrimination against the villagers. He is determined to become the sixth generation of Naruto, so that everyone agrees with his existence. </p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/2.jpg"/> </p> <p> <h3>Hyuga Koda</h3> <p> Japanese actress No. 3 in Naruto's work "Naruto". The female ninja of Muye Ninja Village, the eldest son of the family of the family. I like the whirlpool Naruto. It was originally a girl with a weak personality, but it gradually became stronger under the influence of Naruto and gradually grew into a good ninja. </p> </p> </a> </li> <li> <a href="#" target="_blank"> <p><img alt="" src="images/3.jpg"/></p> <p> <h3>Monge D. Luffy</h3> <p>Monchi D. Luffy is the protagonist of the popular Japanese anime "One Piece." It is the hero of the popular Japanese anime "One Piece". Captain of the Straw Hat Pirates, the dream is to find the legendary treasure - ONE PIECE, become the One Piece. </p> </p> </a> </li> <li> <a href="#" target="_blank"> <p> <img alt="" src="images/4.jpg"/> </p> <p> <h3>Mr. Box</h3> <p> Danbo is a cute doll made out of DIY with a waste paper box. Round eyes and triangular mouths show the innocent expression. When people see it, the heart is soft. Danbo is a pure and kind little guy in its pure fantasy world. In it, always reveals the most pure and lovely moving atmosphere. </p> </p> </a> </li> </ul> </p> </body>
Still quite simple:
Ul is a set of pictures, each li has an a (because we want to click on the picture to jump), a contains two p, one is for normal display (ie display picture), one is displayed after the picture is rotated (ie 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 (parent container of animated elements) perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > p
{
Position: absolute;
Left: 0;
Height: 0;
Width: 100%;
Height: 100%;
Color: #fff;
/*Animation element transform-style*/
-webkit-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
/* Animated element is set to hidden*/
-webkit-backface-visibility: hidden;
}
#content ul li a p:first-child
{
/*
Rotate around the y axis
*/
-webkit-transform: rotateY(0);
Z-index: 2;
}
#content ul li a p:last-child
{
Background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
Z-index: 1;
}
#content ul li a:hover p:first-child
{
-webkit-transform: rotateY(-180deg);
}
#content ul li a:hover p:last-child
{
-webkit-transform: rotateY(0);
}
#content ul li a p 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 p p
{
Padding: 0 10px;
Font-size: 12px;
Text-indent: 2em;
Line-height: 18px;
}
</style>
Ok, the CSS properties mentioned earlier in the article can be found in the above CSS.
1, the most important thing is to understand rotateY, rotate around the y-axis, rotateY literally rotate around the y-axis, and certainly someone asks where the y-axis is:
The center point of the default rotation element is the rotation center (which can be modified by transform-origin), the x and y axes are on the graph, and the z axis is the arrow from the center (the arrow that the screen shoots at your head).
In our example, the default image rotateY=0; the mouse points to rotateY=-180, the negative number, that is, the counterclockwise rotation around the y axis, the positive number is clockwise; the other two axes are the same;
The core of our example is when the mouse is pointing: the picture (p: first-child), rotated 180 degrees counterclockwise from 0 degrees around the y axis to -180 degrees; introduction (p: last-child) from 180 degrees around the y axis counterclockwise Rotate 180 degrees to reach 0 degrees. Causes two effects to rotate counterclockwise together. Some people may ask why the default is not 0 degrees. Note here that the counterclockwise rotation is 180 degrees and then the front state, so when the multiple image is covered, it is equivalent to rotating 180 degrees clockwise from the normal state, because the mouse is pointing Need to return to normal.
Perspective, there is a trick for the stage (the parent element of the animation) settings.
The transform-style is 3d for the 3d change, and there is nothing to say.
There are a lot of properties related to the 3D effect of CSS3. There are chances that future examples will deliberately use unused ones~
Source code click to download. .
Welcome everyone to advise ~ Yes, this example needs to run under chrome, firefox seems to support is not very good, automatically use chrome, firebug is rarely used ~
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
