效果图
实现步骤
1. html基本格式代码写上，然后在body中添加一个内容div，div里面放三张img图片图片路径自定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3d</title>
<link rel="stylesheet" href="css/g.css" type="text/css">
</head>
<body>
<div class="content">
<img src="img/man.png" />
<img src="img/man.png" />
<img src="img/man.png" />
</div>
</body>
</html>
2. 设置父元素content为相对定位，子元素img为绝对定位，并且居中。设置img宽度自适应content的大小，也就是250px，content没有设置高，所以他被内容撑开，也就是被图片的高撑开。最后设置transition属性为0.5s，产生渐变效果。
注：子元素绝对定位，父元素相对定位，简称子绝父相，目的是让子元素 以其父元素为标准来定位。（如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。）
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: rgba(12,12,12,0.1);
}
.content{
margin: 400px;
position: relative;
width: 250px;
background: rgba(12,0,0,1);
}
.content img{
position: absolute;
width: 100%;
transition: 0.5s;
}
3. 接着利用伪类选择器，当鼠标放置上去时，让三张图片以不同的效果进行变换。其中的transform属性控制了2d图片的变换，rotate设置旋转，skew设置图片倾斜，translate设置图片平移。设置透明度，并且为最底层的img设置一个阴影效果box-shadow，并且越底层的图片越透明，使用opacity属性设置透明度。
.content:hover img:nth-child(1){
opacity: 0.2;
box-shadow: -8px 8px 5px rgba(12,12,12,1);
transform: rotate(-20deg) skew(25deg) translate(30px,-30px);
}
.content:hover img:nth-child(2){
opacity: 0.6;
transform: rotate(-20deg) skew(25deg) translate(60px,-60px);
}
.content:hover img:nth-child(3){
opacity:1;
transform: rotate(-20deg) skew(25deg) translate(90px,-90px);
}
代码结束,图片的宽最好用ps修改为250px更美观。