3D图片经过翻转效果CSS3动画，纯CSS代码

效果主要还是运用了CSS3的transform变形属性，本次没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片经过翻转效果CSS3动画</title> 
<style> 
 <style type="text/css">
         *{margin:0px;padding:0px;}
         #content{
             width:500px;
             margin:30px auto;
         }
         .list{
             width:200px;
             margin:25px;
             float:left;
             position:relative;
         }
         .list img{
             width:200px;
             height:200px;
             transform:perspective(200px) rotateY(0deg);
             opacity:;
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
         }
         .text{
             height:200px;
             width:200px;
             line-height:200px;
             background:#000;
             color:#fff;
             opacity:;
             position:absolute;
             text-align:center;
             font-weight:bold;
             top:0px;
             left:0px;
             transform:perspective(200px) rotateY(-180deg);
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
         }
         .list:hover img{
             transform:perspective(200px) rotateY(180deg);
             opacity:;
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
         }
         .list:hover .text{
             transform:perspective(200px) rotateY(0deg);
             opacity:;
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
         }
     </style>
</style>
</head>
<body>
     <div id="content">
         <div class="list">
             <img src="../Images/1.jpg">
            
         </div>
         <div class="list">
             <img src="../Images/2.jpg">
            
         </div>
     </div>

</body>
</html>

相关文章：

你感兴趣的文章：

标签云：