小练习之会动的照片墙
实现照片鼠标滑过放大，旋转，显示的特效
效果图展示
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 600px;
width: 100%;
}
.img{
background-size: cover;
border: 10px solid gainsboro;
height: 207px;
width: 340px;
display: flex;
position: absolute;
box-shadow:2px 2px 2px 2px #333333;
transition: ALL 0.7s ease-in;
}
.container{
background: url("../../a/a.jpg");
transform: rotate(30deg);
}
.content{
background:url("../b.jpg");
transform: rotate(60deg);
}
.img:hover{
transform: rotate(0deg);
box-shadow:5px 5px 5px 5px #333333;
transform: scale(1.5);
}
.container:hover{
z-index: 100;
}
</style>
</head>
<body>
<div class="container img">
</div>
<div class="content img">
</div>
</body>
</html>