This is how the 3D flip effect of images is achieved in CSS3_html/css_WEB-ITnose

Today, we are bringing you a pure CSS3 effect - 3D flipping of images.

Please see the effect: http://webfront.verynet.cc/pc/rotate.html

This effect mainly uses the transform attribute of CSS3. The difference from the previous effect is that this time It is not an animation, so the animation attribute is not used, but the transition attribute is used. This attribute will switch the element between two effects and produce a transition effect. See the code for details.

HTML structure:

 1     <div id="content"> 2         <div class="list"> 3             <img src="../Images/1.jpg"> 4             <div class="text"> 5                 这是小狗哦！！ 6             </div> 7         </div> 8         <div class="list"> 9             <img src="../Images/2.jpg">10             <div class="text">11                 这是小狗哦！！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 displayed first, the angle is 180deg and the transparency is 1. As the mouse rolls over, change the angle and opacity to make it flip. And the words behind it are also true.