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做出 ...
随机推荐
- Unit1-窝窝初体验
全文共3179字,推荐阅读时间10~15分钟. 文章共分四个部分: 作业分析 评测相关 重构策略 初体验感受 作业分析 第一次作业 第一次作业要求我们实现一个简单的幂函数求导工具,没有乘积和复合的情况 ...
- PyQt5 FileDialog的使用例子
加载***.ui文件可以使用: loadUi('main_window.ui', self) self.btnFileChoose.clicked.connect(self.getFolderName ...
- c常用函数-strlwr 和 strupr
strlwr 和 strupr strlwr的功能是把一个字符串全部变成小写, strupr的功能则是把一个字符串全部变成大写.语法结构分别如下: Action() { char test[] = & ...
- CSS文本相关之水平排列[4]
在正常流中,文本都是从左往右.自上而下排列显示,如果想要改变排列方向的话,可以通过CSS属性来改变. text-align属性 文本排列(text-align)可改变文本在水平上的方向,但不改变内部的 ...
- fiddler下载安装
1.官网https://www.telerik.com/fiddler 2.按照要求填写 3.傻瓜式安装 4.安装https证书
- Python进阶——详解元类，metaclass的原理和用法
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题第18篇文章,我们来继续聊聊Python当中的元类. 在上上篇文章当中我们介绍了type元类的用法,在上一篇文章当中我 ...
- 手写简易版Promise
实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. ...
- PHP丨PHP基础知识之条件语SWITCH判断「理论篇」
Switch在一些计算机语言中是保留字,其作用大多情况下是进行判断选择.以PHP来说,switch(开关语句)常和case break default一起使用 典型结构 switch($control ...
- Linux 进程间通信（IPC）总结
概述 一个大型的应用系统,往往需要众多进程协作,进程(Linux进程概念见附1)间通信的重要性显而易见.本系列文章阐述了 Linux 环境下的几种主要进程间通信手段. 进程隔离 进程隔离是为保护操作系 ...
- swiper 实现滑动解锁
最近项目中有这样一个需求,研究了两种写法一个原生,一个使用框架 原生写法: <!DOCTYPE html> <html> <head> <meta chars ...