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. ubuntu sh脚本激活conda 虚拟环境

    第一步:初始化coda 命令:sudo gedit ~/.bashrc 第二部:复制其中这样一段代码 # >>> conda initialize >>> # !! ...

  2. python 之 Django框架(APP和ORM的使用)

    12.3 APP 12.31 创建APP 一个Django项目可以分为很多个APP,用来隔离不同功能模块的代码 用命令行创建一个APP: python3 manage.py startapp app0 ...

  3. 计算GPA

    #include <stdio.h> int main() { int n,t,i; float sum,s,p,m,k; while(~scanf("%d",& ...

  4. Numpy学习笔记（上篇）

    目录 Numpy学习笔记(上篇) 一.Jupyter Notebook的基本使用 二.Jpuyter Notebook的魔法命令 1.%run 2.%timeit & %%timeit 3.% ...

  5. Xshell连接虚拟机文档教程

    1打开VirtualBox 2 找到导入的虚拟机 3右键虚拟机 启动 4 等待加载 5 加载的时候,打开xshell 6 7 填写框住的内容 名称: 自己取 主机: 127.0.0.1  固定内容 端 ...

  6. 气象netCDF数据可视化分析

    气象netCDF数据可视化分析 2019-09-19 15:34:22 自走棋 阅读数 162更多 分类专栏: web前端   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载 ...

  7. 二分法在JavaScript中的应用实例

    前言:原来一直对算法和数据结构望而却步,总觉得前端可能对这块要求不用那么高,但是随着开发经验的增长以及阅历的提升,发现算法和数据结构还是相当重要的,在一些复杂功能的研发中都可以看得到它们的身影.要想提 ...

  8. Linux 下 maven 的下载、上传与安装

    要运行maven,必须要有 JDK ,maven 是由 Java 语言编写的 一.JDK 的安装 ORACLE 官网下载JDK jdk-8u231-linux-x64.tar.gz 上传 JDK 至 ...

  9. 1+X证书学习日志——javascript打印九九乘法表（基础算法）

    /// 注意要给td加上宽高属性,不然就看不到啦 /// td{ width:100px; height:30px; border:1px solid red; }

  10. border-radius圆角属性

    border-radius圆角 当盒子的宽高一样时,设置盒子的border-radius为50%,得到一个圆形 border-radius: 20px 30px 200px 200px; 只写一个值: ...