资料来源：慕课网（点击这里）
课程结束后有两个效果：
效果一：CSS制作照片墙（点击这里）
效果二：旋转出现文字效果（点击这里）
实现代码：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS实现照片墙</title> 6 <style> 7 body{background-color:#eee;} 8 h1{text-align:center;} 9 .container{ 10 /* 11 background-color:#3F3; 12 */ 13 width:950px; 14 height:450px; 15 margin:60px auto; 16 position:relative; 17 } 18 img{padding:10px 10px 15px;background-color:#fff; 19 border:1px solid #ddd; 20 top:50px;left:200px; 21 22 /* 23 考虑到浏览器的兼容性这里加上了-webkit-和-moz-， 24 分别是用于Chrome和Safari浏览器的前缀 25 及-moz-是Firefox的前缀 26 */ 27 -webkit-transform:rotate(-30deg); 28 -moz-transform:rotate(-30deg); 29 rotate(-30deg); 30 /*设置动画时间长度*/ 31 -webkit-transition:2s; 32 -moz-transition:2s; 33 transition:2s; 34 35 /*制作放大效果*/ 36 37 38 } 39 img:hover{ 40 -webkit-transform:rotate(0deg); 41 -moz-transform:rotate(0deg); 42 rotate(0deg); 43 44 -webkit-transform:scale(0.5); 45 -moz-transform:scale(0.5); 46 transform:scale(0.5); 47 48 box-shadow:-10px 10px 15px #ccc; 49 } 50 </style> 51 52 </head> 53 54 <body> 55 <h1>照片墙制作</h1> 56 <div class="container"> 57 <img src="images/5.jpg"> 58 </div> 59 </body> 60 </html>
实现代码二：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> 5 <style> 6 .mainDiv{ 7 width:100px; 8 height:100px; 9 margin:100px auto; 10 text-align: center; 11 line-height: 100px; 12 font-weight: bold; 13 color:#ddd; 14 background:#ddd; 15 border:1px solid #ddd; 16 -webkit-transform:rotate(0deg) scale(1); 17 -moz-transform:rotate(0deg) scale(1); 18 transform:rotate(0deg) scale(1); 19 -webkit-transition:2s; 20 -moz-transition:2s; 21 transition:2s; 22 23 } 24 .mainDiv:hover{ 25 color:#000; 26 background:#f00; 27 border:1px solid #ddd; 28 -webkit-transform:rotate(720deg) scale(2); 29 -moz-transform:rotate(720deg) scale(2); 30 transform:rotate(720deg) scale(2); 31 } 32 </style> 33 <title>css3特效</title> 34 </head> 35 <body> 36 <div class="mainDiv">您好</div> 37 </body> 38 </html>