前言
网上看到的炫酷图片翻转特效，好看纯分享
正文：
1.效果
2.源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>3D 卡片悬浮</title><style>:root {--card-height: 300px;--card-width: calc(var(--card-height) / 1.5);}* {box-sizing: border-box;}body {width: 100vw;height: 100vh;margin: 0;display: flex;justify-content: center;align-items: center;background: #191c29;}.card {width: var(--card-width);height: var(--card-height);position: relative;display: flex;justify-content: center;align-items: flex-end;padding: 0 36px;perspective: 2500px;margin: 0 50px;}.cover-image {width: 100%;height: 100%;object-fit: cover;}.wrapper {transition: all 0.5s;position: absolute;width: 100%;z-index: -1;}.card:hover .wrapper {transform: perspective(900px) translateY(-5%) rotateX(25deg)translateZ(0);box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);-webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);-moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);}.wrapper::before,.wrapper::after {content: '';opacity: 0;width: 100%;height: 80px;transition: all 0.5s;position: absolute;left: 0;}.wrapper::before {top: 0;height: 100%;background-image: linear-gradient(to top,transparent 46%,rgba(12, 13, 19, 0.5) 68%,rgba(12, 13, 19) 97%);}.wrapper::after {bottom: 0;opacity: 1;background-image: linear-gradient(to bottom,transparent 46%,rgba(12, 13, 19, 0.5) 68%,rgba(12, 13, 19) 97%);}.card:hover .wrapper::before,.wrapper::after {opacity: 1;}.card:hover .wrapper::after {height: 120px;}.title {width: 100%;transition: transform 0.5s;}.card:hover .title {transform: translate3d(0%, -50px, 100px);}.character {width: 100%;opacity: 0;transition: all 0.5s;position: absolute;z-index: -1;}.card:hover .character {opacity: 1;transform: translate3d(0%, -30%, 100px);}</style></head><body><div class="card"><div class="wrapper"><imgsrc="https://gd-hbimg.huaban.com/768fb9e505479fc6c3c5704bf5a3e20b1ba5f119124aa-HvpIF1_fw1200"class="cover-image"/></div><imgsrc="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"class="title"/><imgsrc="https://gd-hbimg.huaban.com/d0273d6311acc8641c7715ee5b09217e26880c15146b5-pFqBHa_fw1200"class="character"/></div><div class="card"><div class="wrapper"><imgsrc="https://gd-hbimg.huaban.com/cbcd12b8d1ea9abb955f022de6a37be26ab73b9423921-YBTOhc"class="cover-image"/></div><imgsrc="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC"class="title"/><imgsrc="https://gd-hbimg.huaban.com/84675eb16a4dcc4b86db8652647eae15e87c99bf63b593-Z0Xb2S"class="character"/></div></body></html>
最后
素材来源网络，如有侵权请联系删除。
使用过程中出现问题欢迎交流学习。
