脚本巴巴 www.jiaoben88.com

在CSS3中图片3D翻转效果是这样做到的

发布时间:2014-10-11 15:38:41编辑:脚本巴巴

  今天,带来的是纯CSS3的效果--图片3D翻转。

  这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果。详情请看代码。

  HTML结构:


     <div id="content">
         <div class="list">
             <img src="../Images/1.jpg">
             <div class="text">
                这是小狗哦!!
             </div>
        </div>
         <div class="list">
             <img src="../Images/2.jpg">
             <div class="text">
                 这是小狗哦!!
             </div>
         </div>
     </div>

  CSS样式:


<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:1;
             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:0;
             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:0;
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
         }
         .list:hover .text{
             transform:perspective(200px) rotateY(0deg);
             opacity:1;
             transition:transform 600ms ease,opacity 600ms ease;
             -webkit-transition:transform 600ms ease,opacity 600ms ease;
        }
     </style>

  代码很容易理解,先为图片设置一个初始旋转角度,因为它是先展示的,所以角度为180deg,透明度为1。当鼠标滑过时,改变角度和透明度,使其翻转。而背后的文字也是如此道理。

上一篇:CSS初始CSS+DIV学习
下一篇:CSS3: animation实现简易幻灯片(轮播)

相关文章