HTML+CSS 3D卡片翻转
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML：
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D卡片翻转</title> <link rel="stylesheet" href="./3D卡片翻转.css"> </head>
<body> <section> <div class="card"> <div class="box"> <div class="img-box"> <img src="./images/1.jpg" alt=""> </div> <div class="con-box"> <div> <h2>蒙奇·D·路飞</h2> <p>蒙奇·D·路飞，日本漫画《航海王》及其衍生作品中的男主角。外号“草帽”路飞，是草帽一伙、草帽大船团的船长，极恶的世代之一。橡胶果实能力者，悬赏金15亿贝里。梦想是找到传说中的One Piece，成为海贼王。</p> </div> </div> </div> </div> <div class="card"> <div class="box"> <div class="img-box"> <img src="./images/2.jpg" alt=""> </div> <div class="con-box"> <div> <h2>罗罗诺亚·索隆</h2> <p>罗罗诺亚・索隆，日本漫画《航海王》及其衍生作品中的角色。“草帽一伙”的战斗员，人称“海贼猎人”。2年前登陆香波地群岛的11位“超新星”其中的一位。同时也是被人称作“极恶的世代”中的一位。 </p> </div> </div> </div> </div> <div class="card"> <div class="box"> <div class="img-box"> <img src="./images/3.jpg" alt=""> </div> <div class="con-box"> <div> <h2>山治</h2> <p>山治，日本漫画《海贼王》及其衍生作品中的角色。草帽一伙的厨师，因踢技快准狠被海军称之为“黑足”，悬赏金为3亿3000万贝里。海贼中的绅士，有着卷曲眉毛，永远遮住半边脸的家伙，香烟不离口，最爱女人，很花心但很有风度，从不愿意伤害任何女性，哪怕是敌人。 </p> </div> </div> </div> </div> </section> </body>
</html> |
CSS:
|
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(200deg,#fff1eb,#ace0f9); } section{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; transform-style: preserve-3d; } .card{ position: relative; width: 320px; height: 320px; margin: 20px; transform-style: preserve-3d; perspective: 1000px; } .card .box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: 1s ease; } .card .box .img-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card .box .img-box img{ width: 100%; height: 100%; object-fit: cover; } .card .box .con-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; transform-style: preserve-3d; transform: rotateY(180deg); } .card .box .con-box div{ color: #fff; padding: 20px; background: linear-gradient(30deg,#514a9d,#24c6dc); transform: translateZ(100px); } .card .box .con-box div h2{ font-size: 20px; letter-spacing: 2px; } .card .box .con-box div p{ font-size: 15px; text-align: justify; margin-top: 5px; } .card:hover .box{ transform: rotateY(180deg); } |
