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动画之旋转翻牌效果的更多相关文章

  1. CSS动画：旋转卡片效果

    <!DOCTYPE html> <html> <head> <title>demo</title> </head> <bo ...

  2. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  3. 使用css动画实现领积分效果

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  4. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  5. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  7. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

随机推荐

  1. LC 245. Shortest Word Distance III 【lock, medium】

    Given a list of words and two words word1 and word2, return the shortest distance between these two ...

  2. Linux文件目录操作命令

    ls 显示文件和目录列表 -l 列出文件的详细信息 -a 列出当前目录所有文件,包含隐藏文件 mkdir 创建目录 -p 父目录不存在情况下先生成父目录 cd 切换目录 touch 生成一个空文件 e ...

  3. 阶段3 3.SpringMVC·_06.异常处理及拦截器_6 SpringMVC拦截器之拦截器入门代码

    创建拦截器 新建包 实现拦截器的接口 接口中没有强制实现里面的方法.jdk1.8的特性.接口中已经实现了方法 这就是相当于实现了这个接口.方法已经全帮你实现过了. 如果想去写新的实现方法.Ctrl+o ...

  4. SQL学习（五）多表关联-join

    在实际工作中会用到多表联查,此时需要用到关键字JOIN 一.inner join(内连接) 至少有一个匹配时返回行,只返回两个表中连接字段相等的行 如: select * from ticket in ...

  5. httpClient调用接口的时候，解析返回报文内容

    比如我httpclient调用的接口返回的格式是这样的: 一:data里是个对象 { "code": 200, "message": "执行成功&qu ...

  6. Nginx 代理TCP/UDP 端口

    Nginx 在1.9版本后新增TCP/UDP 代理 Nginx默认是没有开启TCP/UDP代理.需要在编译Nginx是添加--with-stream进行开启. 编译安装Nginx tar zxf cd ...

  7. java源码-CountDownLatch源码分析

    这次分析CountDownLatch,相信大部分人都用过把! CountDownLatch内部还是Sync对象,还是基础AQS(可见其重要性),首先看一下CountDownLatch初始化,Count ...

  8. IDEA工具上传项目报：Push rejected: Push to origin/master was rejected

    原文:https://blog.csdn.net/a137151062/article/details/78820806 解决方案如下: 1.切换到自己项目所在的目录,右键选择GIT BASH Her ...

  9. "UICollectionView实现带头视图和组的头视图同时存在"实现

    实现效果如下: 以前做这效果的界面,总是实现的是section的头视图,因为我一直觉得collectionView是不像UITableView那样有tableHeaderView的,所以每次实现只能是 ...

  10. JavaScript高程第三版笔记-面向对象编程

    之前有篇博客曾提到过一点js的面向对象编程:js面向对象编程. 这里就结合js高程详细剖析一下javascript的面向对象编程. 前序: 1⃣️Object.defineProperty() var ...