前端 CSS 经典:backface-visibility 属性

前言:backface-visibility 属性可以使反转 180deg 的元素隐藏,使用这个属性实现卡片翻转效果

效果

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}.card {width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;perspective: 500px;color: #fff;font-size: 1.2em;position: relative;}.face {width: 100%;height: 100%;}.back,.face {position: absolute;transition: all 0.2s ease;backface-visibility: hidden;}.back {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: #fff;color: #000;transform: rotateY(-180deg);}.card:hover .face {transform: rotateY(180deg);}.card:hover .back {transform: rotateY(0deg);}</style></head><body><div class="card"><img src="./img.jpg" class="face" /><p class="back"><span>yqcoder</span></p></div><script></script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记MySQL事务+消息队列引起的问题

问题描述&#xff1a; 先说一下流程&#xff1a;后端保存前端提交的图表信息&#xff0c;然后发送异步消息到消息队列&#xff0c;由下游服务去处理图表信息。 部署项目到服务器&#xff0c;验证项目功能的时候&#xff0c;出现了以下错误&#xff1a;数据库存在数据。下游服…

Spring Boot+vue社区养老系统(智慧养老平台)

使用技术&#xff1a; springbootvueMySQL 主要功能&#xff1a; 管理员 登录个人资料密码管理, 用户管理:床位类型管理,床位管理,护工管理,老人管理 咨询登记管理&#xff0c;预约登记管理,老人健康信 息管理,费用管理等功能.护工角色包含以下功能: 护工登录&#xff0c;个…

Elastaticsearch与SpringBoot集成的互联网的实战分享

以前有过类似的文章&#xff0c;今天升级版分享重磅内容&#xff0c;Elastaticsearch与SpringBoot集成的互联网的实战。 一、需求分析&#xff1a; 起因是这样的&#xff0c;产品有这样一个需求&#xff1a;数据中的标题、内容、关键词等实现结构化搜索和半结构化搜索、数据时…

自2008年金融危机以来首次,欧洲AAA级CMBS投资者面临亏损

在欧洲预期损失之前&#xff0c;美国AAA级CMBS投资者已经遭受了打击。即便是最高信用等级的投资也不再安全&#xff0c;全球金融系统可能存在一些严重的问题。 历史罕见&#xff0c;最安全的AAA级债权人&#xff0c;在没有发生经济危机的情况下&#xff0c;出现了损失&#xff…

外排序(C语言实现)

前言 本篇博客讲解一下外排序&#xff0c;看这篇排序你的先去看一下&#xff1a;八大经典排序算法-CSDN博客 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;排序_普通young man的博客-CSDN博客 若有问题 评论区见&#x1f4dd; &#x1f3…

【数据结构】带头双向循环链表的实现及链表顺序表的区别

目录 一、带头双向循环链表接口实现 连接关系&#xff1a; 创建哨兵位&#xff08;表头&#xff09;&#xff1a; 头插——头删&#xff1a; 尾插——尾删&#xff1a; 查找——打印&#xff1a; 指定位置pos前插入&#xff0c;删除pos位置&#xff1a; 链表销毁&#x…

setInterval 定时任务执行时间不准验证

一般在处理定时任务的时候都使用setInterval间隔定时调用任务。 setInterval(() > {console.log("interval"); }, 2 * 1000);我们定义的是两秒执行一次&#xff0c;但是浏览器实际执行的间隔时间只多不少。这是由于浏览器执行 JS 是单线程模式&#xff0c;使用se…

解决ArcGIS导出的svg格式的图片插入Word后的字体问题

背景 在ArcGIS中设置字体为Times New Roman&#xff0c;但导入Word后字体转为等线。 ArcGIS中的Layout 导入Word​​​​​​ 原因分析 Word无法识别嵌入进SVG格式文件中的字体。 解决方案 在Export Layer窗口中&#xff0c;将Embed fonts取消勾选&#xff0c;Convert cha…

【深度学习】 探讨Stable Diffusion模型的训练及其偏向性

探讨Stable Diffusion模型的训练及其偏向性 近年来&#xff0c;生成式模型在图像生成领域取得了显著进展&#xff0c;特别是Stable Diffusion模型。作为一种基于扩散过程的生成模型&#xff0c;Stable Diffusion模型展现了生成高质量图像的巨大潜力。然而&#xff0c;与所有机…

本地离线模型搭建指南-RAG架构实现

搭建一个本地中文大语言模型&#xff08;LLM&#xff09;涉及多个关键步骤&#xff0c;从选择模型底座&#xff0c;到运行机器和框架&#xff0c;再到具体的架构实现和训练方式。以下是一个详细的指南&#xff0c;帮助你从零开始构建和运行一个中文大语言模型。 本地离线模型搭…

基于SSM+Vue+微信小程序的大学生就业平台系统+毕业论文

项目包含前台和后台两部分&#xff1a;多角色登录&#xff0c;功能完善&#xff0c;界面优美 前台主要功能实现&#xff1a;首页列表查看、求职信息管理、简历管理、面试邀请管理、个人中心等 后台主要功能实现&#xff1a;首页、个人中心、学生管理、企业管理、企业类型管理…

浏览器插件利器-allWebPluginV2.0.0.14-bata版发布

allWebPlugin简介 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品&#xff0c;致力于将浏览器插件重新应用到所有浏览器。它将现有ActiveX插件直接嵌入浏览器&#xff0c;实现插件加载、界面显示、接口调用、事件回调等。支持谷歌、火狐等浏…

【C++】初始化列表、匿名对象、static成员、友元、内部类

文章目录 一、初始化列表构造函数体赋值初始化列表explicit关键字 二、匿名对象三、static成员四、友元友元函数友元类 五、内部类六、练习题 一、初始化列表 构造函数体赋值 实际上&#xff0c;构造函数的函数体内&#xff0c;并不是对 对象 初始化的地方&#xff0c;而是对…

34、shell数组+正则表达式命令

0、课前补充 jiafa () { result$(echo " $1 $2 " | bc ) print "%.2f\n" "$result" } ##保留小数点两位 薄弱加强点 a$(df -h | awk NR>1 {print $5} | tr -d %) echo "$a"一、数组 1.1、定义 数组的定义&am…

数据分析BI仪表盘搭建

BI仪表盘搭建六个原则&#xff1a; 1.仪表盘搭建符合业务的阅读&#xff0c;思考和操作逻辑。 2.明确仪表盘主题&#xff0c;你的用户对什么感兴趣。 普通业务人员&#xff1a;销售&#xff1a;注册&#xff0c;激活&#xff0c;成交投放&#xff1a;消耗&#xff0c;转化率…

只有一个鸿蒙好?还是鸿蒙、安卓、IOS并存好?

这个话题&#xff0c;现在很敏感&#xff0c;为了防止被喷&#xff0c;我提前且清楚的交待我的观点&#xff1a;我双手欢迎鸿蒙、欢迎仓颉&#xff0c;而且我已经用行动来支持&#xff0c;比如2021年刚发布ArkUI时&#xff0c;我就第一时间上手了&#xff0c;且这几年一直在跟进…

教程:LVM操作讲解

LVM简介 在系统运维过程中&#xff0c;对磁盘扩缩容是常见的操作。如何高效的管理磁盘容量&#xff0c;lvm提供了很好的解决方案。 LVM将磁盘抽象成PV、VG、LV&#xff0c;方便用户进行磁盘管理&#xff0c;简单来讲&#xff0c;是由物理磁盘划分成PV&#xff0c;PV加入到具体…

荣耀社招 测试工程师 技术一面

面经哥只做互联网社招面试经历分享&#xff0c;关注我&#xff0c;每日推送精选面经&#xff0c;面试前&#xff0c;先找面经哥 1、自我介绍 2、具体介绍做过的项目&#xff0c;支撑的事什么业务 3、防火墙测试时、平时有写脚本或者使用第三方工具吗 4、对互联网的安全测试规…

BarTender中文版安装包下载及安装教程

​根据大数据结果显示可扩充的大容量卷标数据库&#xff1a;利用大量已设计好的标签库,从数以千计的现成标签尺寸中进行选择,也能够定义并加入自己的标签库尺寸。习惯上来说操作简单&#xff1a;BarTender条码打印软件是目前功能最强大、便捷的标签设计打印软件,在150 多个国家…

力扣-两数之和

文章目录 题目题解方法1-暴力方法2-哈希 题目 原题链接&#xff1a;两数之和 题解 方法1-暴力 我最先想到的方法就是暴力&#xff0c;两层for循环&#xff0c;也能通过。&#xff08;拿到算法题在没有思路的时候暴力就是思路&#xff0c;哈哈哈&#xff09; public class T…