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>
CSS卡片旋转的更多相关文章
- CSS之旋转立方体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css钻石旋转实现
css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- css做旋转相册效果
css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- js+css立体旋转
纯 CSS3 制作可口可乐罐 这个效果相信大家很多人看过了,纯css实现的立体可口可乐罐,看起来相当高大上~ 于是今天我这小菜鸟试着研究下,稍微遗憾的是,没有看到源码,还是直接F12吧,貌似实现也不 ...
- CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS transform旋转问题
我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...
- css制作旋转风车（transform 篇）
做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图 打开的时候自动旋转 ...
- CSS色调旋转滤镜
一 关于filter 首先看一下官方对于CSS的filter属性的定义: CSS属性将模糊或颜色偏移等图形效果应用于元素.滤镜通常用于调整图像,背景和边框的渲染. 本文主要讲的是filter中的一个属 ...
随机推荐
- 查询时间倒退一天-项目中惊现神秘BUG-JsonFormat使用采坑记
一.问题由来 前一天下午正在写代码的时候,领导突然走过来跟我说,让我去看一个神秘的BUG,说是在数据库中查询时的一个日期 返回到页面后,查询时间倒退了一天.一听到这个BUG,我就感觉很奇怪,还有这样的 ...
- 《深入理解计算机系统》实验二 —— Bomb Lab
这是CSAPP的第二个实验,主要让我们理解代码的机器级表示,最重要的是理解每个寄存器的作用以及如何使用这些寄存器.本次的实验内容有点晦涩难懂,对于这些内容多看下习惯就好了. 本次实验中的bomb文 ...
- 【题解】「CF1373B」01 Game
这题好水,就是简单的模拟+字符串. \(\sf Translation\) 给定一个 \(01\) 串,如果 \(0\) 出现的次数和 \(1\) 出现的次数的最小值是奇数,输出 DA ,否则输出 N ...
- Vue-组件传值：子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- django 验证码
1.django 缓存设置 django的六种缓存(mysql+redis) :https://www.cnblogs.com/xiaonq/p/7978402.html#i6 1.1 安装Djang ...
- Elements-of-Python_04_Function
(内容包括函数.递归.Lambda.作用域等) 1. 函数 1.1 函数概述 函数是对程序逻辑进行结构化和过程化的一种编程方法,用于封装一个特定的功能,表示一个功能或者行为.函数是可以重复执行的语句块 ...
- springmvc使用路径变量后再进行页面跳转会出现路径错误问题
学习<Servlet.JSP和SpringMVC学习指南>遇到的一个问题,记录下. 项目代码 现象 @RequestMapping(value = "/book_edit/{id ...
- 多任务-python实现-Thread的基本使用（2.1.1）
@ 目录 1.多任务的概念 2.线程 1.多任务的概念 "多任务工作"指的是当前很普遍的工作状态,一个人同时处理多件事情,比如以下这个常见的画面:写一会报告,刷一下网页,查一下资料 ...
- Kali Linux破解wifi密码(无须外置网卡）
环境准备: 方式一(选择该方式):Kali Linux.笔记本一台.U盘(至少8G) 方式二:Kali Linux.外置网卡.笔记本一台.VM 特别说明,主要是使用方式一进行破解,如果有外置网 ...
- DRF终极封装ViewSet和Router附教程PDF源码
在DRF官方教程的学习过程中,一个很明显的感受是框架在不断地进行封装,我们自己写框架/工具/脚本/平台也可以模仿模仿,先完成底层代码,再做多层封装,让使用者很容易就上手操作.本文是教程的最后一篇,介绍 ...