web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位，这样两个盒子可以完全重合在一起，需要给父盒子一个
当鼠标放上时就会旋转
以下代码直接复制即可使用。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
position: relative;
transform-style: preserve-3d;
float: left;
perspective: 400px;
perspective: 180px;
width: 150px;
height: 150px;
margin: 100px 20px;
transition: all 0.3s;
} .card:hover {
transform: rotateY(-180deg);
} .cover,
.back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 25px;
text-align: center;
line-height: 150px;
} .cover {
background-color: purple;
transform: rotateY(180deg);
} .back {
z-index:;
background-color: pink;
}
</style>
</head> <body>
<div class="card">
<div class="cover">1号正面</div>
<div class="back">1号反面</div>
</div>
<div class="card">
<div class="cover">2号正面</div>
<div class="back">2号反面</div>
</div>
<div class="card">
<div class="cover">3号正面</div>
<div class="back">3号反面</div>
</div>
<div class="card">
<div class="cover">4号正面</div>
<div class="back">4号反面</div>
</div>
</body> </html>
web CSS3 实现3D动态翻牌效果的更多相关文章
- 9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- web CSS3 实现3D旋转木马
3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...
- CSS3特效----图片动态提示效果
需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...
- Web 开发中很实用的效果【源码下载】
网页特效下载 引用地址:http://www.yyyweb.com/350.html 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应 ...
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
随机推荐
- Swift 界面跳转
iOS开发中界面跳转有两种方式,上下跳转和左右跳转. 上下跳转_TO: let secondViewController = SecondViewController() self.presentVi ...
- HotCorner-让Windows 10拥有macOS的触发角特性！
目录 简介 软件功能 下载 安装 卸载 使用 License 作者 FAQ 简介 macOS上有一个很方便的功能:"触发角".通过这个功能可以设置当鼠标移动到屏幕的四个角时的触发事 ...
- Python删除一个列表元素的方法
参考资料: https://www.cnblogs.com/xiaodai0/p/10564956.html https://www.cnblogs.com/huangbiquan/articles/ ...
- 【JMeter_09】JMeter逻辑控制器__临界部分控制器<Critical Section Controller>
临界部分控制器<Critical Section Controller> 业务逻辑: 根据锁名来控制并发,同一个锁名之下,在同一时间点只能存在一个运行中,适用于控制并发的场景 锁名类型: ...
- Linux nohup命令详解，终端关闭程序依然可以在执行！
大家好,我是良许. 在工作中,我们很经常跑一个很重要的程序,有时候这个程序需要跑好几个小时,甚至需要几天,这个时候如果我们退出终端,或者网络不好连接中断,那么程序就会被中止.而这个情况肯定不是我们想看 ...
- Python在Linux下编译安装
[准备环境] Linux centos [前言] 1 linux下默认带Python,带的是2.7版本的 ,如果需要升级版本,需要把系统的自带的Python改名或者卸载,再次安装你所需要的Python ...
- Consul入门初识
Consul Consul是一个支持多数据中心分布式高可用的服务发现和配置共享的服务软件,由HashiCrop公司用Go语言开发,基于Mozilla Public License 2.0的协议进行开源 ...
- 010.OpenShift综合实验及应用
实验一 安装OpenShift 1.1 前置准备 [student@workstation ~]$ lab review-install setup 1.2 配置规划 OpenShift集群有三个节点 ...
- 【neo4j】文件管理路径、数据备份、创建新数据库、导入数据等操作记录
neo4j一般的配置路径如下 一.备份数据 使用neo4j-admin命令. 首先,先找到数据的存储路径,然后关闭数据库. 关闭数据库的语句如下: #切换到/bin目录下 ./neo4j stop 然 ...
- html+css快速入门教程（1）
1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...