共计 1155 个字符，预计需要花费 3 分钟才能阅读完成。
代码来自头条号 ” 前端小智 ”, 侵权删
| <!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> |
正文完
