HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多彩照片墙</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<img src="./image/1.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/3.jpg" alt="">
<img src="./image/4.jpg" alt="">
<img src="./image/5.jpg" alt="">
<img src="./image/6.jpg" alt="">
<img src="./image/7.jpg" alt="">
<img src="./image/8.jpg" alt="">
<img src="./image/9.jpg" alt="">
<img src="./image/10.jpg" alt="">
</div>
</body>
</html>css代码如下：
div {width: 1360px;margin: 0 auto;position: relative;
}
div img {border: 1px #cccccc solid;padding: 10px;background: #fff;position: absolute;transition: all 0.8s ease-in-out; /*过渡的触发机制，慢动作（秒数越大，速度越慢）*/
}div img:nth-child(even) {/*even表示下标为奇数*/width: 200px;
}
div img:nth-child(odd) {/*odd表示下标为偶数*/width: 300px;
}
div img:nth-child(1) {top: 150px;left: 300px;transform: rotate(20deg);
}
div img:nth-child(2) {top: 150px;left: 100px;transform: rotate(-20deg);
}
div img:nth-child(3) {top: 150px;left: 600px;transform: rotate(0deg);
}
div img:nth-child(4) {top: 400px;left: 600px;transform: rotate(-30deg);
}
div img:nth-child(5) {top: 200px;right: 100px;transform: rotate(30deg);
}
div img:nth-child(6) {top: 400px;right: 350px;transform: rotate(30deg);
}
div img:nth-child(7) {top: 400px;left: 150px;transform: rotate(-30deg);
}
div img:nth-child(8) {top: 500px;left: 450px;transform: rotate(0deg);
}
div img:nth-child(9) {top: 500px;right: 120px;transform: rotate(-20deg);
}
div img:nth-child(10) {top: 550px;right: 450px;transform: rotate(5deg);
}/*鼠标放上去的效果*/
div img:hover {z-index: 99;transform: rotate(360deg) scale(1.5); /*2D旋转 deg参数为旋转的角度*/
}
照片随意添加自己喜欢的都可以。感谢观看，互关学习！
