第一个：360度翻转特效
<style>
* {
margin:0;
padding:0;
}
.aa {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url(images/author.jpg) left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.aa:hover {
-webkit-transform: rotatez(360deg); /*transform transition 以及 边角的弧度 border-radius 要考虑兼容性的问题*/
-moz-transform: rotatez(360deg);
-o-transform: rotatez(360deg);
-ms-transform: rotatez(360deg);
transform: rotatez(360deg);
}
</style><body><p class="aa"></p></body>
第二种：照片墙悬挂效果
<style>body{font-family:tahoma,helvetica,\5b8b\4f53,arial,sans-serif;font-size:12px;color:#fff;}
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
input,button,textarea{border:none 0}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
a:link{text-decoration:none}
a:visited{text-decoration:none}
a:hover{text-decoration:none}
.clear{zoom:1}
.clear:after{content:;display:block;clear:both}/* polaroids */.polaroids{width:100%;margin:0 0 18px 10px;}.polaroids li{display: inline;}.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: marker felt, sans-serif;text-decoration: none;color:#333;font-size: 18px;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);-o-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);}.polaroids img{display: block;width:190px;margin-bottom:12px;}.polaroids a:after{content: attr(title);/* ie8+,ff,chorme,safari */}
.polaroids li:nth-child(even) a{
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
.polaroids li:nth-child(3n) a{
-webkit-transform:none;
-moz-transform:none;
-ms-transform:rotate(2deg);
transform:none;
position: relative;
top:-5px;
}
.polaroids li:nth-child(5n) a{
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
transform:rotate(5deg);
position: relative;
right:5px;
}
.polaroids li:nth-child(8n) a{
position: relative;
top:8px;
right:5px;
}
.polaroids li:nth-child(11n) a{
position: relative;
top:3px;
right:-5px;
}
.polaroids li a:hover{
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
transform:scale(1.25);
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
-o-box-shadow:0 3px 6px rgba(0,0,0,.5);
box-shadow:0 3px 6px rgba(0,0,0,.5);
position: relative;
z-index: 5;
}
.polaroids li.messy a{margin-top:-375px;margin-left:160px;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
</style>
<body>
<ul class="polaroids">
<li><a href="#" title="roelan"><img src="images/image-01.jpg" alt="roeland!"></a></li>
<li><a href="#" title="discus"><img src="images/image-02.jpg" alt="discussion"></a></li>
<li><a href="#" title="a hear"><img src="images/image-01.jpg" alt="a hearty laugh"></a></li>
<li><a href="#" title="evil m"><img src="images/image-02.jpg" alt="evil matt coding"></a></li>
<li><a href="#" title="scribb"><img src="images/image-01.jpg" alt="scribbles"></a></li>
<li><a href="#" title="amanda"><img src="images/image-02.jpg" alt="amanda glares..."></a></li>
<li><a href="#" title="the do"><img src="images/image-01.jpg" alt="the dougernaut"></a></li>
<li><a href="#" title="i see "><img src="images/image-02.jpg" alt="i see you!"></a></li>
<li><a href="#" title="rock h"><img src="images/image-01.jpg" alt="rock hard balls"></a></li>
<li><a href="#" title="bocce "><img src="images/image-02.jpg" alt="bocce ball"></a></li>
<li><a href="#" title="boris "><img src="images/image-01.jpg" alt="boris "tatooine""></a></li>
<li><a href="#" title="sneake"><img src="images/image-02.jpg" alt="sneakers & stilettos"></a></li>
</ul>
<ul class="polaroids" style="width:280px;">
<li><a href="#" title="roelan"><img src="images/image-01.jpg" alt="roeland!"></a></li>
<li><a href="#" title="discus"><img src="images/image-02.jpg" alt="discussion"></a></li>
<li class="messy"><a href="#" title="a hear"><img src="images/image-01.jpg" alt="a hearty laugh"></a></li>
</ul>
</body>
相关文章：
简单做出html5翻页效果文字特效
css实现3d立方体旋转特效的示例代码
详细介绍html5 3d衣服摇摆动画特效如何实现
以上就是css比较常用的翻转特效的详细内容。