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 ...
随机推荐
- 【转】python 输入一个时间，获取这个时间的下一秒
原文:https://blog.csdn.net/l_d_56/article/details/84832198 输入一个时间,获取这个时间的下一秒 PS:下面代码使用于 python 2.7 tim ...
- Async Task Types in C#
Async Task Types in C# Extend async to support task types that match a specific pattern, in addition ...
- Activity的screenOrientation属性
activity在屏幕当中显示的方向.属性值可以是下表中列出的一个值: "unspecified" 默认值,由系统来选择方向.它的使用策略,以及由于选择时特定的上下文环境,可能会因 ...
- cookie、session的联系和区别，多台web服务器如何共享session
1.Cookie与Session的联系: cookie在客户端保存状态,session在服务器端保存状态.但是由于在服务器端保存状态的时候,在客户端也需要一个标识,所以session也可能要借助coo ...
- ipv4 ipv6 求字符串和整数一一映射的算法 AmazonOrderId
字符串和整数一一映射的算法 公司每人的英文名不同,现在给每个英文名一个不同的数字编号,怎么设计? 走ipv4/6 2/32 2/128就够了,把“网段”概念对应到“表或库”,ip有a_e5类,这概念 ...
- 一、初识Spring Boot框架
一.搭建Spring Boot环境 1.选择Project,选择Spring Initializr 2.选择Sdk与默认url 3.点击 Next 4.修改一下Group信息和Artifacet,Ne ...
- 电脑里明明安装了net4.7但是VS里不显示？
我系统中明明已经安装了Net4.7,但是VS中却只显示到4.6.2 再下载4.7进行安装也提示,系统中已经安装,无法安装. 为啥呢,最后发现原来是装上.NET Framework 4.7.2 开发人员 ...
- SQLServer 简单数据拆分
--1. 旧的解决方法(sql server 2000) create table tb(id int,value varchar(30)) insert into tb values(1,'aa ...
- LC 889. Construct Binary Tree from Preorder and Postorder Traversal
Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...
- python处理文件---每行末尾加上字符
题记:该代码是项目中需要处理一个文件,所以使用python去处理,还有另外一个方法就是使用notepad++的正则替换,这里就只是使用python脚本去处理了. 我想只要你懂一门语言,就很容易处理这个 ...