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.

  1. .container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   width: 50vw;
  6.   margin: auto;
  7. }
  8.  
  9. .card {
  10.   margin-top: 1rem;
  11.   height: 60vh;
  12.   width: 100%;
  13.   position: relative;
  14. }
  15.  
  16. .cardFront,
  17. .cardBack {
  18.   border-radius: 0.25rem;
  19.   height: 100%;
  20.   padding-left: 0.5rem;
  21.   padding-right: 0.5rem;
  22.   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
  23.     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  24.   width: 100%;
  25.   position: absolute;
  26.   backface-visibility: hidden;
  27.   transition: transform 0.5s ease;
  28. }
  29.  
  30. .cardBack {
  31.   transform: perspective(600px) rotateY(180deg);
  32.   background-color: #ebf4ff;
  33. }
  34.  
  35. .cardBack.flipped {
  36.   transform: perspective(600px) rotateY(0deg);
  37. }
  38.  
  39. .cardFront {
  40.   transform: perspective(600px) rotateY(0deg);
  41. }
  42.  
  43. .cardFront.flipped {
  44.   transform: perspective(600px) rotateY(-180deg);
  45. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>CSS Card Flip</title>
  8.     <link rel="stylesheet" href="./styles.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <button type="button" id="flip-btn">Flip Card</button>
  13.       <div class="card">
  14.         <div id="back" class="cardBack">Back</div>
  15.         <div id="front" class="cardFront">Front</div>
  16.       </div>
  17.     </div>
  18.     <script>
  19.       const front = document.getElementById('front')
  20.       const back = document.getElementById('back')
  21.       const btn = document.getElementById('flip-btn')
  22.       function handleFlip() {
  23.         front.classList.toggle('flipped')
  24.         back.classList.toggle('flipped')
  25.       }
  26.       btn.addEventListener('click', handleFlip)
  27.     </script>
  28.   </body>
  29. </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. LOJ6300 博弈论与概率统计 组合、莫队

    传送门 如果在\(0\)以下之后仍然会减分,那么最后的结果一定是\(N-M\). 注意到如果在Alice分数为\(0\)时继续输,那么就相当于减少了一次输的次数.也就是说如果说在总的博弈过程中,Ali ...

  2. go语言学习---使用os.Args获取简单参数（命令行解析）

    实例1: //main package main import ( "fmt" "os" ) func main() { fmt.Println(os.Args ...

  3. [高清·非影印] Docker 容器与容器云（第2版）

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  4. C#学习笔记------参数

    一.形参 形参是本地变量,它声明在方法的参数列表中,而不是方法体中.

  5. 通俗易懂的join、left join、right join、full join、cross join

    内连接:列出与连接条件匹配的数据行(join\inner join) 外连接:两表合并,如有不相同的列,另外一个表显示null(left join\right join\full outer join ...

  6. springboot笔记05——profile多环境配置切换

    前言 一个应用程序从开发到上线,往往需要经历几个阶段,例如开发.测试.上线.每个阶段所用到的环境的配置可能都是不一样的,Springboot 应用可以很方便地在各个环境中对配置进行切换.所以,今天主要 ...

  7. 命令行获取docker远程仓库镜像列表

    命令行获取docker远程仓库镜像列表 获取思路 通过curl获取镜像tag的json串,解析后得到${image}:${tag}的格式 curl获取示例 # curl [:-s] ${API}/${ ...

  8. 【转载】 C#使用Math.PI常量来表示圆周率

    在C#中计算圆形面积的时候,我们时常会用到圆周率这个变量,圆周率我们一般定义为十进制decimal类型变量,圆周率的值为3.1415926535等一个近似值,其实在C#的数值计算类Math类中,有专门 ...

  9. 二叉树&满二叉树与完全二叉树

    二叉树的定义 二叉树(Binary Tree)是n(n≥0)个元素的有限集合,该集合为空或者为由一个称为"根"的元素及两个不相交的.被分别称为左子树和右子树的二叉树组成 二叉树的基 ...

  10. DCL 管理用户

    DCL(Data Control Language) 使用MySQL数据库默认使用的都是 root 用户,超级管理员,拥有全部的权限. 在一个公司里面的数据库服务器上面可能同时运行这很多个项目的数据库 ...