欢迎光临
我们一直在努力

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>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » 3D图片经过翻转效果CSS3动画,纯CSS代码


关注公众号『新起点软件管家』

获取最新网络资源及破解软件!
带你玩转各样软件...

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏