实例：3D分层图像悬停效果
技术栈：HTML+CSS
效果：
源码：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3D分层图像悬停效果</title>
<link rel="stylesheet" href="../css/49.css">
</head>
<body>
<div class="container">
<div class="img-box">
<img src="../images/op/8.jpg" alt="">
<img src="../images/op/8.jpg" alt="">
<img src="../images/op/8.jpg" alt="">
<img src="../images/op/8.jpg" alt="">
</div>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/* 渐变背景 */
background: linear-gradient(200deg,#deecdd,#74ebd5);
}
.container{
width: 360px;
height: 640px;
}
.container .img-box{
/* 相对定位 */
position: relative;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
/* 动画过渡 */
transition: 0.5s;
}
.container img{
/* 绝对定位 */
position: absolute;
width: 100%;
height: 100%;
/* 对图片进行剪切，保留原有尺寸比例，内容被缩放 */
object-fit: contain;
background-color: #646464;
transition: 0.5s;
}
.container:hover .img-box{
margin-top: 80px;
/* 旋转-30度 倾斜25度 缩放为0.8倍 */
transform: rotate(-30deg) skew(25deg) scale(0.8);
}
/* 鼠标移入，改变每张图片的位置、不透明度、动画延迟时间 */
.container:hover img:nth-child(4){
transform: translate(160px,-160px);
opacity: 1;
transition-delay: 0.5s;
}
.container:hover img:nth-child(3){
transform: translate(120px,-120px);
opacity: 0.8;
transition-delay: 0.5s;
}
.container:hover img:nth-child(2){
transform: translate(80px,-80px);
opacity: 0.6;
transition-delay: 0.5s;
}
.container:hover img:nth-child(1){
transform: translate(40px,-40px);
opacity: 0.4;
transition-delay: 0.5s;
}
