CSS3: 3D flip Effect of images (web page effect-one more per day), css3 flip

CSS3: 3D flip Effect of images (web page effect-one more per day), css3 flip

Today, it brings about the effect of pure CSS3-3D flip of images.

See effect: http://webfront.verynet.cc/pc/rotate.html

This effect mainly uses the transform deformation attribute of CSS3. Different from the previous effect, this time it is not an animation, So it uses the transition attribute instead of the animation attribute. This attribute switches the elements between two effects and produces a transitional effect. For more information, see the code.

HTML structure:

1 <div id = "content"> 2 <div class = "list"> 3  4 <div class = "text"> 5. This is a puppy !! 6 </div> 7 </div> 8 <div class = "list"> 9  10 <div class = "text"> 11. This is a puppy !! 12 </div> 13 </div> 14 </div>

CSS style:

 1 <style type="text/css"> 2         *{margin:0px;padding:0px;} 3         #content{ 4             width:500px; 5             margin:30px auto; 6         } 7         .list{ 8             width:200px; 9             margin:25px;10             float:left;11             position:relative;12         }13         .list img{14             width:200px;15             height:200px;16             transform:perspective(200px) rotateY(0deg);17             opacity:1;18             transition:transform 600ms ease,opacity 600ms ease;19             -webkit-transition:transform 600ms ease,opacity 600ms ease;20         }21         .text{22             height:200px;23             width:200px;24             line-height:200px;25             background:#000;26             color:#fff;27             opacity:0;28             position:absolute;29             text-align:center;30             font-weight:bold;31             top:0px;32             left:0px;33             transform:perspective(200px) rotateY(-180deg);34             transition:transform 600ms ease,opacity 600ms ease;35             -webkit-transition:transform 600ms ease,opacity 600ms ease;36         }37         .list:hover img{38             transform:perspective(200px) rotateY(180deg);39             opacity:0;40             transition:transform 600ms ease,opacity 600ms ease;41             -webkit-transition:transform 600ms ease,opacity 600ms ease;42         }43         .list:hover .text{44             transform:perspective(200px) rotateY(0deg);45             opacity:1;46             transition:transform 600ms ease,opacity 600ms ease;47             -webkit-transition:transform 600ms ease,opacity 600ms ease;48         }49     </style>

The code is easy to understand. First set an initial rotation angle for the image because it is first displayed, so the angle is 180deg and the transparency is 1. When the mouse slides out, the angle and transparency are changed to flip it. The text behind the scenes is also true.

Enjoy Code, life, and Web page effects.

CSS3 flip pictures

There is no answer to your question. I just want to insert a sentence when I see your question. Note: You have implemented the webkit prefix in this way. You don't have to use the webkit kernel browser. You should write:
Transform: rotate (180deg );
-Ms-transform: rotate (180deg);/* IE 9 */
-Moz-transform: rotate (180deg);/* Firefox */
-Webkit-transform: rotate (180deg);/* Safari and Chrome */
-O-transform: rotate (180deg);/* Opera */
Currently, the correct method is implemented by using JavaScript with css, and css3 is still early in popularity. Currently, mainstream browsers have different implementation methods for css3 and html5, so they must be set separately.

How can I use CSS code to control the effect of navigation image flip?

A: link {background: url ("a.jpg")} default link status
A: visited {background: url ("a.jpg")} status after the link has been accessed
A: hover {background: url ("B .jpg")} status when the mouse moves up
A: active {background: url ("c.jpg")} current activity status

Put it in the style.

Define the specific navigation name!