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. js+css立体旋转

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

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

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

  5. css transform旋转属性

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

  6. CSS transform旋转问题

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

  7. css制作旋转风车(transform 篇)

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

  8. 个人制作-css+html旋转立方体的制作

    源代码: <!DOCTYPE html><html><head>    <title></title>    <meta charse ...

  9. css 实现旋转八卦图

    虽然这不算什么亮点,不过也可以供路上的小伙伴学习下 直接上干货: <!doctype html> <html lang="en"> <head> ...

  10. css div旋转之后自适应

    css: .rotate90deg { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -moz-transfor ...

随机推荐

  1. Oracle 使用SqlPlus管理

    Oracle 使用SqlPlus 安装,一键安装,很简单.安装过程,一定要记住密码 一.登陆sqlplus 连接本地服务器,可以直接,打开cmd: 可以直接不用登陆,如果登陆需要输入用户名.密码. s ...

  2. Delete Exists

    Create PROCEDURE [dbo].[LVS_Update_WaferInfo] @LotId varchar(40), @xmlData xmlasBEGIN delete W from ...

  3. .Net程序员之Python基础教程学习----字符串的使用 [Second Day]

         在The FirstDay 里面学习了列表的元组的使用,今天开始学习字符串的使用.字符串的使用主要要掌握,字符串的格式化(C语言中我们应该都知道,Python和C语言差别不大),字符串的基本 ...

  4. kmp

    #include <bits/stdc++.h> #define MAXN 100000 using namespace std; string a, b; int next[MAXN]; ...

  5. js中退出语句break,continue和return 比较

    js中退出语句break,continue和return 比较 在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是 ...

  6. 常用自动化测试工具介绍(支持B/S、C/S)

    一.功能测试工具1.QTP测试工具 全名HP QuickTest Professional software ,最新的版本为HP QuickTest Professional 11.0 QTP是qui ...

  7. 神奇的match和replace

    源自跟奈落大叔的讨论,PHP和JavaScript的比较. 正则: 先说几个正则写法: () 选择匹配一组, (?:) 降低 () 的优先级, .*? 和 .+? ,阻止 . 和 + 的贪婪. 还有一 ...

  8. java实现大数相加问题

    闲来没事.写了个acm中常常遇到的大数加减问题的java 解决代码,我想说.用java的BigInteger 非常easy. 大爱java!! 比如: 实现多组输入的大数加减问题: import ja ...

  9. inux按照CPU、内存、磁盘IO、网络性能监测

    http://my.oschina.net/chape/blog/159640 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监测,而且是一个长 ...

  10. Java 多态 父类和子类方法的访问控制权限

    Java 多态 父类和子类方法的访问控制权限 @author ixenos 父类和子类方法的访问控制权限 继承是为了扩展类的功能,而这种扩展显然就是对一个原始类的扩展,目的还是向上转型来调用,所以这就 ...