效果圖
實現步驟
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更美觀。