CSS3 image 3D flip effect (webpage effect updated daily)_html/css_WEB-ITnose

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

Please see the effect: http://localhost:63342/webfront/PC/rotate.html

This effect mainly uses the transform attribute of CSS3, which is different from the previous effect. , 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, start with the picture Set an initial rotation angle, since it is displayed first, so 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.

Enjoy the code, enjoy life, web page effects, updated daily.