1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置

例子如下：

  1. <style>
  2.         .box {
  3.             height: 300px;
  4.             width: 300px;
  5.             position: relative;
  6.         }
  7.  
  8.         .zh,
  9.         .fan {
  10.             height: 300px;
  11.             width: 300px;
  12.             line-height: 300px;
  13.             font-size: 30px;
  14.             text-align: center;
  15.             color: blue;
  16.             transition: all 2s;
  17.             backface-visibility: hidden;
  18.             /* 背面不可见 */
  19.             position: absolute;
  20.             top:;
  21.             left:;
  22.         }
  23.  
  24.         .zh {
  25.             background-color: aqua;
  26.         }
  27.  
  28.         .fan {
  29.             background-color: aquamarine;
  30.             transform: rotateY(-180deg) rotateZ(-180deg);
  31.         }
  32.  
  33.         .box:hover .zh {
  34.             transform: rotateY(180deg) rotateZ(180deg)
  35.         }
  36.  
  37.         .box:hover .fan {
  38.             transform: rotateY(0) rotateZ(0);
  39.         }
  40.     </style>
  41. </head>
  42.  
  43. <body>
  44.     <div class="box">
  45.         <div class="zh">正面</div>
  46.         <div class="fan">反面</div>
  47.  
  48.     </div>
  49. </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. Winform使用ML.NET时无法加载 DLL“CpuMathNative”问题的解决方法

    同样的代码运行在netcore下可以,运行在winform中就出现错误: 引发的异常:“System.DllNotFoundException”(位于 Microsoft.ML.Data.dll 中) ...

  2. Java快排

    package quickSort; /** * 快速排序 * @author root * */ public class QuickSort { static int[] data = {0,2, ...

  3. flutter 切换tab后保留tab状态

    前言 最近在用flutter写一个小项目,在写主页面(底部导航栏+子页面)时遇到的一个问题:当点击底部item切换到另一页面, 再返回此页面时会重走它的initState方法(我们一般在initSta ...

  4. ZeroC ICE java异步实现方式（ami/amd）

    首先说说ami 和amd 的区别(以下为个人见解,仅供参考.如有疑问欢迎提出来) ami (异步方法调用): 仅仅基于ice 的同步方式扩展了异步的扩展方式,其他理念改动不大,使用起来好理解,但是服务 ...

  5. mybatis如何遍历Map的key和value【增删改查】

    转: mybatis如何遍历Map的key和value 2017年11月28日 10:07:57 Joker_Ye 阅读数:4158   1.sql.xml <?xml version=&quo ...

  6. linux常用命令(18)find exec

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了.-exec  参数后面跟的是command命令,它的终止是以 ...

  7. JavaScript基础入门08

    目录 JavaScript 基础入门08 DOM 介绍 绑定事件 给一组元素绑定事件 节点 节点树 节点类型 选取文档内容 通过id选取元素 通过指定的标签名选取元素 用指定的css类来选取元素 通过 ...

  8. Linux 学习路径

    Linux learning path Mind Map graph LR A[Linux学习路径]-->b[计算机概论与硬件相关知识] A -->c[Linux 初级] A --> ...

  9. java程序加到系统托盘的方法

    package swingtest; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; impor ...

  10. Unity中的全局坐标系和局部坐标系

      全局坐标系 描述游戏场景内所有物体位置和方向的基准,也称为世界坐标系.在Unity场景中创建的物体都是以全局坐标系中的坐标原点(0,0,0)来确定各自的位置的. 局部坐标系 每个物体都有其独立的坐 ...