第一个：360度翻转特效
* { 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);}
第二种：照片墙悬挂效果
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);}
相关文章：
简单做出HTML5翻页效果文字特效
css实现3D立方体旋转特效的示例代码
立即学习“前端免费学习笔记（深入）”；
详细介绍HTML5 3D衣服摇摆动画特效如何实现
以上就是CSS比较常用的翻转特效的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607915.html
微信扫一扫 
支付宝扫一扫 
