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. leetcode-hard-ListNode-23. Merge k Sorted Lists

    mycode   91.2% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x ...

  2. LC 648. Replace Words

    In English, we have a concept called root, which can be followed by some other words to form another ...

  3. js 中文字符串转base64

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

  4. Spring Bean学习创建及使用<一>

    转自:http://glzaction.iteye.com/blog/1299441 Spring中依赖注入有三种注入方式: 一.构造器注入: 二.设值注入(setter方式注入): 三.Feild方 ...

  5. gateway 整合 websocket demo

    背景: 这个websocket  因为使用的地方不多,并没有独立出一个项目,是集成在已有的服务中. 1: gateway 配置 - id: service-test   uri: lb:ws://se ...

  6. 从GoogleClusterData统计每个用户的使用率、平均每次出价

    之前将google cluster data导入了Azure上的MySQL数据库,下一步就是对这些数据进行分析, 挖掘用户的使用规律了. 首先,为了加快执行速度,对user,time等加入索引. 然后 ...

  7. [Python]在python中调用shell脚本,并传入参数-02python操作shell实例

    首先创建2个shell脚本文件,测试用. test_shell_no_para.sh 运行时,不需要传递参数 test_shell_2_para.sh 运行时,需要传递2个参数  test_shell ...

  8. 初探ASP.NET Web API (转）

    http://www.cnblogs.com/mejoy/p/6402821.html 什么是ASP.NET Web API? 官方的解释是 ASP.NET Web API is a framewor ...

  9. 使用 WebStorm alt+f2 快速打开浏览器测试的一点bug

    这个bug是涉及到中英文文件名的问题(不涉及到路径名): Case 1: 中文文件名 当打开alt+f2快捷方式打开含有中文名的html文件时,路径名直接变为localhost,所以找不到要打开的文件 ...

  10. 走进Selenium新世界

    浏览器 Firefox Setup 35.0.1 安装完成后设置菜单栏 关闭浏览器自动更新 插件配置(必备武器) FireBug Firebug是firefox下的一个扩展,能够调试所有网站语言,如H ...