css动画之旋转翻牌效果
1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置
例子如下：
<style>
.box {
height: 300px;
width: 300px;
position: relative;
} .zh,
.fan {
height: 300px;
width: 300px;
line-height: 300px;
font-size: 30px;
text-align: center;
color: blue;
transition: all 2s;
backface-visibility: hidden;
/* 背面不可见 */
position: absolute;
top:;
left:;
} .zh {
background-color: aqua;
} .fan {
background-color: aquamarine;
transform: rotateY(-180deg) rotateZ(-180deg);
} .box:hover .zh {
transform: rotateY(180deg) rotateZ(180deg)
} .box:hover .fan {
transform: rotateY(0) rotateZ(0);
}
</style>
</head> <body>
<div class="box">
<div class="zh">正面</div>
<div class="fan">反面</div> </div>
</body>
2、效果如下：
---恢复内容结束---
css动画之旋转翻牌效果的更多相关文章
- CSS动画：旋转卡片效果
<!DOCTYPE html> <html> <head> <title>demo</title> </head> <bo ...
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 使用css动画实现领积分效果
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
- CSS动画总结与呼吸灯效果
首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...
随机推荐
- 在jenkins打开roboframework报告:Opening Robot Framework report failed
来源自: https://blog.51cto.com/icestick8586/1884615 --------------------------------------------------- ...
- laravel 文件上传总结
调用 store 方法会生成唯一的 ID 来作为文件名,如果想获取原件本来的名称可以使用 $file = $request->file('file'); $file->getClientO ...
- koa 基础（十四）cookie 的基本使用
1.app.js /** * cookie的简介: * 1.cookie保存在浏览器客户端 * 2.可以让我们用同一个浏览器访问同一个域名的时候共享数据 * * cookie的作用: * 1.保存用户 ...
- [eclipse]如何修改Eclipse编辑器的字体
步骤如下, 菜单->"Window"->“Preference”->“General”->“Appearance”->“Colors & Fo ...
- 云服务器 ECS 是什么？
云服务器 Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器 ECS 就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务 ...
- 使用 certbot 自动给 nginx 加上 https
概述 目前,Let's Encrypt 可以算是最好用的 https 证书申请网站了吧.而 certbot 可以算是它的客户端,能够很方便的自动生成 https 证书.我把自己的使用经历记录下来,供以 ...
- layui时间控件选择时间范围
layui.use([ 'laydate'], function(){ var $ = layui.$; var laydate = layui.laydate; var max = ${nowYea ...
- 转: 动态加载、移除js、css文件
function loadjscssfile(filename, filetype){ if (filetype=="js"){ var fileref=document.crea ...
- debian中安装gcc make
ubuntu debian 可以直接 apt-get install gcc automake autoconf libtool make
- 重启sshd服务
查看状态: systemctl status sshd.service 启动服务: systemctl start sshd.service 重启服务: systemctl restart sshd. ...