效果:
鼠标触碰时:
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相片墙</title><style>* {margin: 0;padding: 0;}ul {height: 400px;border: 1px solid #000;background-color: skyblue;margin-top: 100px;text-align: center;}ul li {list-style: none;width: 150px;height: 200px;background-color: red;display: inline-block;margin-top: 100px;transition: all 1s;position: relative;box-shadow: 0 0 10px;}ul li:nth-child(1) {transform: rotate(30deg);}ul li:nth-child(2) {transform: rotate(-40deg);}ul li:nth-child(3) {transform: rotate(10deg);}ul li:nth-child(4) {transform: rotate(45deg);}ul li img {width: 150px;height: 200px;border: 5px solid #FFFFFF;box-sizing: border-box;}ul li:hover {/*transform: rotate(0);*/transform: none;transform: scale(1.5);z-index: 88;}</style>
</head>
<body>
<ul><li><img src="pic/4.jpg"></li><li><img src="pic/2.jpg"></li><li><img src="pic/3.jpg"></li><li><img src="pic/4.jpg"></li>
</ul>
</body>
</html>
