Code from the headline number “front end small wisdom “, infringement delete
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta </ span > </ p > < p style =" margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; 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; /* The perspective attribute defines the distance from the 3D element to the view, in pixels. This property allows you to change the view of a 3D element to view a 3D element. */ transform: perspective(800px) rotateY(20deg); */ transform: perspective(800px) rotateY(20deg); transition: .5s; -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004); Container :hover img {opacity: 0.1;}. 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 >