代码来自头条号"前端小智", 侵权删
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 1100px;
display: flex;
justify-content: space-between;
}
img{
width: 350px;
height: 350px;
transform-origin: center;
/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身*/
transform: perspective(800px) rotateY(20deg);
transition: .5s;
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004); /*倒影*/
}
.container:hover img {
opacity: 0.1;
}
.container img:hover{
transform:perspective(800px) rotateY(0deg);
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt="">
<img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt="">
<img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。