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="../JD/reset.css">
<link rel="stylesheet" href="../img/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="//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="//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="//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="//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="//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="//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>
