CSS卡片旋转
html{ perspective: 800px; } body{ display:flex; flex-wrap: wrap; } .card{ transform-style: preserve-3d; position:relative; height:500px; width:300px; border: 6px inset rgba(240, 237, 237, 0.5); margin-right:30px; margin-bottom:40px; box-shadow:3px 3px 5px 1px gray; border-radius: 6px; background-image:linear-gradient(150deg,rgb(145, 144, 144),rgb(235, 231, 231), rgb(255, 255, 255), rgb(161, 159, 159)); padding-top: 0px;transition:transform 1s ease-in; } .card:hover{ transform:rotateY(180deg); } .front{ height:100%; width:100%; position: absolute; left:0; top:0; } .back{ display:flex; align-items: center; height:100%; width:100%; line-height:100%; position:absolute; left:0; top:0; background-image:linear-gradient(150deg,rgb(145, 144, 144),rgb(235, 231, 231), rgb(255, 255, 255), rgb(161, 159, 159)); transform:rotateY(180deg); } .textback{ font-family: '幼圆'; font-size:1.5rem; line-height:2rem; position:absolute; text-align: center; width:100%; } img{ height:300px; width:100%; } .text{ color:rgb(109, 106, 106); font-family: '幼圆'; font-size:1.5rem; position:absolute; width:100%; top:77%; text-align: center; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../xyz/blog.css"><!--注意这里是自己的路径，需要改变--> </head> <body> <div class="card"> <div class="front"> <div class="image"><img src="../img/和氏璧.jpg" alt=""></div> <div class="text">和氏璧</div> </div> <div class="back"> <div class="textback"> 和氏璧，中国历史上著名的美玉，又称和氏之璧、荆玉、荆虹、荆璧、和璧、和璞，为天下奇宝。<br> 与和氏璧有关的著名典故“完璧归赵”讲述了战国时期赵国名相蔺相如帮助国家夺回和氏璧，完整地送回邯郸的故事。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3344211831,1085079435&fm=26&gp=0.jpg" alt=""></div> <div class="text">武夷山</div> </div> <div class="back"> <div class="textback"> 武夷山，武夷山位于江西与福建西北部两省交界处，武夷山脉北段东南麓总面积999.75平方公里，是中国著名的风景旅游区和避暑胜地。属典型的丹霞地貌，是首批国家级重点风景名胜区之一。<br>武夷山是三教名山。 自秦汉以来，武夷山就为羽流禅家栖息之地，留下了不少宫观、道院和庵堂故址。武夷山还曾是儒家学者倡道讲学之地。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2593659218,3205345709&fm=26&gp=0.jpg" alt=""></div> <div class="text">ENIAC</div> </div> <div class="back"> <div class="textback"> ENIAC，电子数字积分计算机。ENIAC是继ABC（阿塔纳索夫-贝瑞计算机）之后的第二台电子计算机和第一台通用计算机。<br>它是完全的电子计算机，能够重新编程，解决各种计算问题。它于1946年2月14日在美国宣告诞生。 承担开发任务的人员由科学家约翰·冯·诺依曼和“莫尔小组”的工程师埃克特、莫克利、戈尔斯坦以及华人科学家朱传榘组成。总工程师埃克特在当时年仅25岁。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="../img/和氏璧.jpg" alt=""></div> <div class="text">和氏璧</div> </div> <div class="back"> <div class="textback"> 和氏璧，中国历史上著名的美玉，又称和氏之璧、荆玉、荆虹、荆璧、和璧、和璞，为天下奇宝。<br> 与和氏璧有关的著名典故“完璧归赵”讲述了战国时期赵国名相蔺相如帮助国家夺回和氏璧，完整地送回邯郸的故事。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3344211831,1085079435&fm=26&gp=0.jpg" alt=""></div> <div class="text">武夷山</div> </div> <div class="back"> <div class="textback"> 武夷山，武夷山位于江西与福建西北部两省交界处，武夷山脉北段东南麓总面积999.75平方公里，是中国著名的风景旅游区和避暑胜地。属典型的丹霞地貌，是首批国家级重点风景名胜区之一。<br>武夷山是三教名山。 自秦汉以来，武夷山就为羽流禅家栖息之地，留下了不少宫观、道院和庵堂故址。武夷山还曾是儒家学者倡道讲学之地。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2593659218,3205345709&fm=26&gp=0.jpg" alt=""></div> <div class="text">ENIAC</div> </div> <div class="back"> <div class="textback"> ENIAC，电子数字积分计算机。ENIAC是继ABC（阿塔纳索夫-贝瑞计算机）之后的第二台电子计算机和第一台通用计算机。<br>它是完全的电子计算机，能够重新编程，解决各种计算问题。它于1946年2月14日在美国宣告诞生。 承担开发任务的人员由科学家约翰·冯·诺依曼和“莫尔小组”的工程师埃克特、莫克利、戈尔斯坦以及华人科学家朱传榘组成。总工程师埃克特在当时年仅25岁。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="../img/和氏璧.jpg" alt=""></div> <div class="text">和氏璧</div> </div> <div class="back"> <div class="textback"> 和氏璧，中国历史上著名的美玉，又称和氏之璧、荆玉、荆虹、荆璧、和璧、和璞，为天下奇宝。<br> 与和氏璧有关的著名典故“完璧归赵”讲述了战国时期赵国名相蔺相如帮助国家夺回和氏璧，完整地送回邯郸的故事。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3344211831,1085079435&fm=26&gp=0.jpg" alt=""></div> <div class="text">武夷山</div> </div> <div class="back"> <div class="textback"> 武夷山，武夷山位于江西与福建西北部两省交界处，武夷山脉北段东南麓总面积999.75平方公里，是中国著名的风景旅游区和避暑胜地。属典型的丹霞地貌，是首批国家级重点风景名胜区之一。<br>武夷山是三教名山。 自秦汉以来，武夷山就为羽流禅家栖息之地，留下了不少宫观、道院和庵堂故址。武夷山还曾是儒家学者倡道讲学之地。 </div> </div> </div> <div class="card"> <div class="front"> <div class="image"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2593659218,3205345709&fm=26&gp=0.jpg" alt=""></div> <div class="text">ENIAC</div> </div> <div class="back"> <div class="textback"> ENIAC，电子数字积分计算机。ENIAC是继ABC（阿塔纳索夫-贝瑞计算机）之后的第二台电子计算机和第一台通用计算机。<br>它是完全的电子计算机，能够重新编程，解决各种计算问题。它于1946年2月14日在美国宣告诞生。 承担开发任务的人员由科学家约翰·冯·诺依曼和“莫尔小组”的工程师埃克特、莫克利、戈尔斯坦以及华人科学家朱传榘组成。总工程师埃克特在当时年仅25岁。 </div> </div> </div> </body> </html>
版权声明：本文为froggie原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。