Animation can be a powerful way to enhance a user experience. In this lesson, we'll walk through the creation of a card-flip animation, creating a nice visual effect when toggling between the front and back of a div meant to represent a card, like a playing card, or a flashcard. We'll create this effect using a touch of JavaScript and CSS transforms. No framework or library required.

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 50vw;

  margin: auto;

}

.card {

  margin-top: 1rem;

  height: 60vh;

  width: 100%;

  position: relative;

}

.cardFront,

.cardBack {

  border-radius: 0.25rem;

  height: 100%;

  padding-left: 0.5rem;

  padding-right: 0.5rem;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  width: 100%;

  position: absolute;

  backface-visibility: hidden;

  transition: transform 0.5s ease;

}

.cardBack {

  transform: perspective(600px) rotateY(180deg);

  background-color: #ebf4ff;

}

.cardBack.flipped {

  transform: perspective(600px) rotateY(0deg);

}

.cardFront {

  transform: perspective(600px) rotateY(0deg);

}

.cardFront.flipped {

  transform: perspective(600px) rotateY(-180deg);

}
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>CSS Card Flip</title>

    <link rel="stylesheet" href="./styles.css" />

  </head>

  <body>

    <div class="container">

      <button type="button" id="flip-btn">Flip Card</button>

      <div class="card">

        <div id="back" class="cardBack">Back</div>

        <div id="front" class="cardFront">Front</div>

      </div>

    </div>

    <script>

      const front = document.getElementById('front')

      const back = document.getElementById('back')

      const btn = document.getElementById('flip-btn')

      function handleFlip() {

        front.classList.toggle('flipped')

        back.classList.toggle('flipped')

      }

      btn.addEventListener('click', handleFlip)

    </script>

  </body>

</html>

[CSS] Create a Card Flip Animation with CSS的更多相关文章

  1. [CSS] Build a Fluid Loading Animation in CSS

    In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. CSS系列：在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  5. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  6. CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  7. css知多少（2）——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  8. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  9. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

随机推荐

  1. linux net通信 基于密钥

    配置SSHD服务 SSH(Secure Shell)是一种能够以安全的方式提供远程登录的协议,也是目前远程管理 Linux 系统的首选方式.在此之前,一般使用 FTP 或 Telnet 来进行远程登录 ...

  2. 39 多线程（十一）——ThreadLocal

    目前阶段,我只能知其然,不能做到知其所以然,这里引用一篇其所以然的文章,为以后理解ThreadLocal做准备: https://www.cnblogs.com/ldq2016/p/9041856.h ...

  3. XGBoost 重要参数(调参使用)

    XGBoost 重要参数(调参使用) 数据比赛Kaggle,天池中最常见的就是XGBoost和LightGBM. 模型是在数据比赛中尤为重要的,但是实际上,在比赛的过程中,大部分朋友在模型上花的时间却 ...

  4. Ubuntu 中linux 编译错误的（-）

    1.错误 compress.c:14:58: fatal error: zlib.h: No such file or directorycompilation terminated. 解决:sudo ...

  5. Spring Cloud--服务的发布与调用示例

    [Provider] 引依赖: 启动类上添加注解: 配置文件: [Consumer] 引依赖: 加注解: 配置文件: 调用服务: 方式一(动态获取服务列表): Eureka默认30秒拉取一次服务列表. ...

  6. dubbo线程池的拒绝策略

    jdk自带的原生的拒绝策略抛出的异常信息不够详细,而dubbo对拒绝策略进行了改写,抛出的信息更具有参考价值,值得我们借鉴. jdk自带的原生拒绝策略抛出的信息: // ThreadPoolExecu ...

  7. SQL Server中，常用的全局变量

    在SQL Server中,全局变量是一种特殊类型的变量,服务器将维护这些变量的值.全局变量以@@前缀开头,不必进行声明,它们属于系统定义的函数.下表就是SQL Server中一些常用的全局变量. 全局 ...

  8. java报错与解决方法总结

    错误 error:Syntax error, insert ")" to complete MethodDeclaration 解决办法:放到main方法里 错误原因: 错误: e ...

  9. Math对象的一些方法

    ceil(n) 返回n向上取整的最近的整数floor(n) 返回n向下取整到最近的整数max(a,b,c...) 返回最大值min(a,b,c...) 返回最小值round(n) 返回n四舍五入的最近 ...

  10. Vue项目中遇到的问题汇总

    一.打包后的打开index.html页面空白的几种情况: 引入的css.js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为 ...