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. linux系统创建windows启动盘

    平时工作中用到linux的操作命令较多,因此为了方便,就给电脑装了双系统,一般工作的时候,都选择进入linux系统.但是今天有件工作之外的事情需要解决下:创建一个windows启动盘.如果按照往常来说 ...

  2. Fiddler抓包原理和使用详解

    iddler抓包工具在APP开发过程中使用非常频繁,对开发者理解HTTP网络传输原理以及分析定位网络方面的问题非常有帮助.今天抽点时间出来总结一下Fiddler在实际开发过程中的应用. 我开发过程中使 ...

  3. js 中文字符串转base64

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 学习 C++ 读什么书

    C++ 看什么书? 很多莘莘学子,想要在这条路上前进,却是踽踽独行,摸不到门路.就像我当初是一样的.在没有一个前辈带路的情况下,想要自己一个人摸索前进,那份迷茫,深深的刻进自己的记忆里.     下面 ...

  5. ValueStack对象

    ValueStack, 即值栈对象. 值栈对象: 是整个struts数据存储的核心,或者叫中转站. 用户每次访问struts的action,都会创建一个Action对象.值栈对象.ActionCont ...

  6. ssh 的一个坑

    概述 今天我碰到 fabric 和 ssh 的一个坑,记录下来,供以后开发时参考,相信对其他人也有用. ssh 今天用 ssh 登录远程服务器用不了 npm,查了下,发现原因是: ssh登录时不会加载 ...

  7. 阶段3 3.SpringMVC·_03.SpringMVC常用注解_2 RequestBody注解

    拿整个请求体的数据

  8. padding的计算方法

    转自https://blog.csdn.net/qq_34599526/article/details/83755275 VALID:如果卷积核超出特征层,就不再就计算,即卷积核右边界不超出Featu ...

  9. MySQL乱码的原因和设置UTF8数据格式

    https://segmentfault.com/a/1190000018662023 MySQL使用时,有一件很痛苦的事情肯定是结果乱码.将编码格式都设置为UTF8可以解决这个问题,我们今天来说下为 ...

  10. Servlet(4)：Session

    Session, Cookie及交互 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确 ...