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卡片旋转的更多相关文章

  1. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css钻石旋转实现

    css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. js+css立体旋转

    纯 CSS3 制作可口可乐罐  这个效果相信大家很多人看过了,纯css实现的立体可口可乐罐,看起来相当高大上~ 于是今天我这小菜鸟试着研究下,稍微遗憾的是,没有看到源码,还是直接F12吧,貌似实现也不 ...

  5. CSS 3D旋转 hover 后设置transform 是相对于正常位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  8. css制作旋转风车（transform 篇）

    做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图 打开的时候自动旋转 ...

  9. CSS色调旋转滤镜

    一 关于filter 首先看一下官方对于CSS的filter属性的定义: CSS属性将模糊或颜色偏移等图形效果应用于元素.滤镜通常用于调整图像,背景和边框的渲染. 本文主要讲的是filter中的一个属 ...

随机推荐

  1. 没有它你的DevOps是玩不转的，你信不？

    摘要:架构的选择对于DevOps的实践是至关重要的,从某种程度上来说,架构就是DevOps这场战役的粮草,它是支撑着DevOps成功落地的重要前提. 善用兵者,役不再籍,粮不三载.取用于国,因粮于敌, ...

  2. KM 算法

    KM 算法 可能需要先去学学匈牙利算法等二分图相关知识. 模板题-洛谷P6577 [模板]二分图最大权完美匹配 给 \(n\) 和 \(m\) 与边 \(u_i,v_i,w_i(1\le i\le m ...

  3. Zabbix自定义模板监控多个url接口

    一.脚本配置 1.监控脚本 /etc/zabbix/zabbix_agent2.d/scripts/web_site_code_status.sh #!/bin/bash url_discovery( ...

  4. 一、Nginx笔记--linux下载安装部署Nginx

    Nginx 到底是什么? Nginx  是⼀个⾼性能的HTTP和反向代理web服务器,核⼼特点是占有内存少,并发能⼒强 Nginx ⼜能做什么事情(应⽤场景) Http服务器(Web服务器) 性能⾮常 ...

  5. 可选链plugin-proposal-optional-chaining的使用（优化）

    第一步 安装 npm install --save-dev @babel/plugin-proposal-optional-chaining 然后在.babelrc.js文件夹里进行配置 plugin ...

  6. Linux安装Mycat1.6.7.4并实现Mysql数据库读写分离简单配置

    1. Mycat简介 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务.ACID.可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵的Oracle集群 一 ...

  7. HBase过滤器:SingleColumnValueFilter和FirstKeyOnlyFilter一起使用的问题

    FirstKeyOnlyFilter是对第一列进行过滤,hbase中的列按照字典序排列,所以如果SingleColumnValueFilter中的过滤列不是第一列的话,FirstKeyOnlyFilt ...

  8. html 06-HTML5详解

    06-HTML5详解 #HTML5的介绍 #Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2 ...

  9. openstack高可用集群15-后端存储技术—GlusterFS（分布式存储）

         

  10. 让你轻松掌握 Python 中的 Hook 钩子函数

    1. 什么是Hook 经常会听到钩子函数(hook function)这个概念,最近在看目标检测开源框架mmdetection,里面也出现大量Hook的编程方式,那到底什么是hook?hook的作用是 ...