前言
网上看到的炫酷图片翻转特效，好看纯分享
正文：
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"> <img src="https://gd-hbimg.huaban.com/768fb9e505479fc6c3c5704bf5a3e20b1ba5f119124aa-HvpIF1_fw1200" class="cover-image" /> </div> <img src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC" class="title" /> <img src="https://gd-hbimg.huaban.com/d0273d6311acc8641c7715ee5b09217e26880c15146b5-pFqBHa_fw1200" class="character" /> </div> <div class="card"> <div class="wrapper"> <img src="https://gd-hbimg.huaban.com/cbcd12b8d1ea9abb955f022de6a37be26ab73b9423921-YBTOhc" class="cover-image" /> </div> <img src="https://gd-hbimg.huaban.com/e85d1bb632aa065a7c3e7e7b3f2fd0021300b39680c07-vO28MC" class="title" /> <img src="https://gd-hbimg.huaban.com/84675eb16a4dcc4b86db8652647eae15e87c99bf63b593-Z0Xb2S" class="character" /> </div> </body></html>
最后
素材来源网络，如有侵权请联系删除。
使用过程中出现问题欢迎交流学习。