Home > Developer > Web Develop
First of all, I would like to thank w3cfuns ~
Today, we will bring you a flop effect created by CSS3, that is, move the mouse over the element and you will be able to see the information behind the element. If you want to create a memory-test continuous watching, poker game, or even write some words to your girlfriend, you can try it after using the album created by this instance ~
:
Some new attributes of CSS3 used by the instance:
A.-webkit-perspective: 800px;
Perspective (perspective): Attributes define the distance between 3D elements and the view, in pixels. This attribute allows you to change 3D elements to view 3D element views. Determines whether you see 2D transform or 3D transform.
B.-webkit-transform-style: preserve-3d;
The transform-style attribute specifies how to present nested elements in a 3D space. The default flat (flat) is used. We use 3D effects and select 3D.
C.-webkit-backface-visibility: hidden;Whether the selected element is displayed after it is rotated to the back.
D.-webkit-transform: rotateY (0 );The element rotates around the Y axis.
The above attributes give you a perceptual knowledge. After reading the examples, you can savor these attributes, or baidu or google Shenma.
Example:
Html:
<Body> <div id = "content"> <ul> <li> <a href = "#" target = "_ blank"> <div> </div>
It is quite simple:Ul is a group of images, and each li has a (because we want to click an image to jump to). a contains two divs. One is displayed normally (that is, the image is displayed ), one is displayed after the image is rotated (that is, the 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 the animation element) perspective */-webkit-perspective: 800px;-moz-perspective: 800px;} # content ul li a> div {position: absolute; left: 0; height: 0; width: 100%; height: 100%; color: # fff;/* animation element transform-style */-webkit-transform-style: preserve-3d;-webkit-transition :. 8 s margin-in-out;/* set the animation element to hidden */-webkit-backface-visibility: hidden;} # content ul li a div: first-child {/* rotate around Y axis */-webkit-transform: 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 CSS attributes mentioned above can be found.1. The most important thing is to understand rotateY and rotate around the Y axis. Remember my exquisite case in HTML5 CSS3: using a similar property transform: rotate (2520deg) in the personalized slide of the VCD box ); 2D rotation is used.
RotateY literally rotates around the Y axis. Someone must ask where the Y axis is:
By default, the center of the element to be rotated is the center of the rotation (which can be modified through transform-origin). The x and Y axes are on the graph, the Z axis is the arrow (the arrow that the screen emits to your head) from the center ).
In our example, the default picture rotateY = 0; the mouse points to rotateY =-180, a negative number, that is, the clockwise rotation around the Y axis, positive number, is clockwise; the other two axes are the same;
The core of our example is that when you point to the image (div: first-child), the rotation from 0 degrees around the Y axis reaches-180 degrees counterclockwise. Introduction (div: last-child) rotate 180 degrees counterclockwise from 180 degrees around the Y axis to 0 degrees. This results in two counter-clockwise rotations. Someone may ask why the default value is not 0 degrees. Here, we will note that it is positive after 180 degrees of clockwise rotation, so when the image is overwritten, it is equivalent to rotating 180 degrees clockwise from the normal state, because the normal state needs to be restored when the mouse points.
Perspective is skillful in setting the stage (the parent element of the animation.
Transform-style is of course 3d for 3d changes.
There are many attributes related to the 3d effects of CSS3, and there will be opportunities for future examples to deliberately use those that have not been used ~
Thank you for your advice ~ By the way, this example needs to run in chrome. firefox does not seem to support very well. chrome is used automatically, and firebug is rarely used ~ Hey hey ~
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
