首页 > 代码库 > 在CSS3中图片3D翻转效果是这样做到的

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

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

  请看效果:http://webfront.verynet.cc/pc/rotate.html

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

  HTML结构:

 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样式:

 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>

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

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