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做出 ...
随机推荐
- Random Point in Triangle【随机数解决期望值问题】
Random Point in Triangle 题目链接(点击) 题目描述 Bobo has a triangle ABC with A(x1,y1),B(x2,y2)A(x1,y1),B(x2,y ...
- 厉害了！除了find命令，还有这么多文件查找命令，高手必备！
大家好,我是良许. 在系统里查找文件,是所有工程师都必备的技能(不管你用的是 Windows .Linux.还是 MacOS 系统).对于 Linux 操作系统,单单一个 find 命令就可以完成非常 ...
- JVM面试题总结
1.介绍下 Java 内存区域(运行时数据区) Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域. JDK 1.8之前主要分为:堆.方法区.虚拟机栈.本地方法栈 ...
- cb39a_c++_STL_算法_for_each_transform_比较
cb39a_c++_STL_算法_for_each_transform_比较for_each() 速度快,不灵活transform() 速度慢, 非常灵活 STL算法-修改性算法for_each()c ...
- 多语言工作者の十日冲刺<1/10>
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺--第一天(04.30) 作业正文 ...
- Vuex怎么用（1）
1. vuex是什么 github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对应用中组件的状态 ...
- 在ASP.NET 中有哪些数据验证控件（请解释ASP.NET中以什么方式进行数据验证）？
(1)RequiredFieldValidator:检查用户是否输入: (2)CompareValidator:检查两个表单输入项的输入信息是否存在某种指定关系,比如大.等于等: (3)RangeVa ...
- CF #640 (div4)
CF640 div4 草 迟到半个月的补题 真正的懒狗 再懒就无了 D. Alice, Bob and Candies 题意:n个数字,奇数时间从左侧删数字,偶数时间从右侧删数字,每次删的数字之和必须 ...
- RabbitMQ：五、高阶
存储机制 持久化的消息和非持久化的消息都可以被写入到磁盘. 持久化的消息一开始就会写入磁盘,如果可以,也会在内存中保存一部分以提高性能,当内存吃紧时会从内存中清楚. 非持久化的消息一般存储在内存中,内 ...
- 入门大数据---Hive的搭建
本博客主要介绍Hive和MySql的搭建: 学习视频一天就讲完了,我看完了自己搭建MySql遇到了一堆坑,然后花了快两天才解决完,终于把MySql搭建好了.然后又去搭建Hive,又遇到了很多坑,就这 ...