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. When 表达式 kotlin(9)

    When 表达式 when 取代了类 C 语言的 switch 操作符.其最简单的形式如下:控制流when (x) { 1 -> print("x == 1") 2 -> ...

  2. TLS Thread Local Storage

    https://blog.csdn.net/yusiguyuan/article/details/22938671 https://blog.csdn.net/simsunny22/article/d ...

  3. ROC和AUC————摘在网络

    ROC曲线 对于0,1两类分类问题,一些分类器得到的结果往往不是0,1这样的标签,如神经网络,得到诸如0.5,0,8这样的分类结果.这时,我们人为取一个阈值,比如0.4,那么小于0.4的为0类,大于等 ...

  4. 八十三：redis之redis的使用场景和安装

    使用场景1.登录会话存储,存储在redis中,与mamcached相比,数据不会丢失2.排行榜.计数器:比如一些秀场类的项目,经常会有一些前多少名的主播排行榜,还有一些文章阅读量.或者点赞数等3.作为 ...

  5. 七十九：flask.Restful之flask-Restful蓝图与渲染模板

    1.flask-Restful与蓝图结合使用如果要在蓝图中使用flask-Restful,那么在创建Api对象的时候,就不应该使用app,而是蓝图,如果有多个蓝图,则需在每一个蓝图里面创建一个Api对 ...

  6. java浮点型数据保留两位小数

    /*** * 保留2位小数 * @param floatValue * @return */ float scale(Float floatValue) { DecimalFormat format ...

  7. MybatisPlus使用代码篇

    package spring.server.consumer; import com.baomidou.mybatisplus.annotation.DbType; import com.baomid ...

  8. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

  9. MSSQL字符串分割

    CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS @r TABLE(id int IDENTITY(1, 1), value va ...

  10. Xshell 6 安装注册说明

    1.下载 官方下载到的版本在进行安装的时候,是有序列号输入框的如下图,但是好像我们从那个所谓的官网上下载的却没有,只能下载到一点击注册就跳转到一个网站的那种版本. 像上面这种版本如何下载呢? 我们去官 ...