首页 > Web开发 > 详细

CSS卡片旋转

时间:2021-01-14 10:01:56      阅读:1      评论:0      收藏:0      [点我收藏+]
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>

 

CSS卡片旋转

原文:https://www.cnblogs.com/froggie/p/14275465.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号