代码来自头条号"前端小智", 侵权删
<!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>