摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3照片墙</title> <style> div{width:1400px;margin:20px auto;} img
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3照片墙</title>
<style>
div{width:1400px;margin:20px auto;}
img {width:300px;height:300px;box-sizing: border-box;padding:5px;border:1px solid #ccc;margin:2px 3px;border-radius:4px;cursor: pointer;box-shadow:1px 0px 5px 1px #eae;transition: all .5s;}
img:hover{box-shadow:0 0 8px 1px #eee;border:1px solid #999;background-color:#fff;z-index: 99;}
/* 缩放 */
.scale:hover{transform:scale(1.15); }
/* 旋转 */
.rotateRight:hover{transform: rotate(8deg);}
.rotateLeft:hover{transform: rotate(-8deg);}
</style>
</head>
<body>
<div>
<img class="rotateLeft" src="images/1.jpg" alt="">
<img class="rotate" src="images/2.jpg" alt="">
<img class="rotateRight" src="images/3.jpg" alt="">
<img class="rotateRight" src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img class="scale" src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img class="scale" src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
<img class="scale" src="images/13.jpg" alt="">
<img src="images/14.jpg" alt="">
<img src="images/15.jpg" alt="">
<img class="scale" src="images/16.jpg" alt="">
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-11 09:40:36
老师总结：其实就是css3新属性方法的使用,多多练习吧
