网页前端代码用css如何实现如下图不规则的图片排列。鼠标经过图片突出显示大图
网页前端代码用css如何实现如下图不规则的图片排列。鼠标经过图片突出显示大图，点击图片出现一个带左右按钮的播放图片的层，求如下图的前端网页代码或示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body{margin: 0; padding: 0;}
.box{margin: 0 auto; width: 400px; transform: rotate(-45deg);}
span{display: inline-block; width: 50px; height: 50px; margin: 0 1px 2px 0; background-color: lightblue; transition: 1s;}
span:hover{transform: scale(3); background-color: red;}
</style>
</head>
<body>
<div class="box">
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body{margin: 0; padding: 0;}
.box{margin: 0 auto; width: 400px; transform: rotate(-45deg);}
span{display: inline-block; width: 50px; height: 50px; margin: 0 1px 2px 0; background-color: lightblue; transition: 1s;}
span:hover{transform: scale(3); background-color: red;}
</style>
</head>
<body>
<div class="box">
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
代码实现的是不规则排列和鼠标滑过放大，至于点击出现左右箭头切换就要用到JS了
追问感谢感谢，能否给出一个带左右箭头切换的带js的源码？
追答附件为简易版例子，请参考
温馨提示：答案为网友推荐，仅供参考
相似回答