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. xorm -Exist方法实例

    判断某个记录是否存在可以使用Exist, 相比Get,Exist性能更好. package main import ( "fmt" _ "github.com/go-sq ...

  2. THUSC2019：Illusory World

    拿了1=就来更 Update:没约咕了

  3. go语言学习笔记----模拟实现文件拷贝函数

    实例1 //main package main import ( "bufio" "flag" "fmt" "io" & ...

  4. 温故知新-网络基础1-ip地址计算

    网络地址换算 1.网络地址分类 A类:0.0.0.0到127.255.255.255 255.0.0.0/8 B类:128.0.0.0到191.255.255.255 255.255.0.0/16 C ...

  5. (七) Docker 部署 MySql8.0 一主一从 高可用集群

    参考并感谢 官方文档 https://hub.docker.com/_/mysql y0ngb1n https://www.jianshu.com/p/0439206e1f28 vito0319 ht ...

  6. vue项目在ie中空白问题

    vue项目在ie浏览器中出现空白,f12打开后发现在body下面就只有一个div盒子,因此我们可以猜测就是js没有引入导致的,所有网上看了一些相关的才知道,在ie中无法解析es6或者版本更高的语法,所 ...

  7. 【转】如何使用jupyter编写数学公式(译)

    [1.如何使用jupyter编写数学公式(译)][1] [1]: https://www.jianshu.com/p/93ccc63e5a1b

  8. cpio命令

    RPM包中文件提取 cpio命令主要有三种基本模式:"-o"模式指的是copy-out模式,就是把数据备份到文件库中:"-i"模式指的是copy-in模式,就是 ...

  9. python 执行系统命令模块比较

    python 执行系统命令模块比较 1.os.system模块 仅仅在子终端运行命令,返回状态码,0为成功,其他为失败,但是不返回执行结果 如果再命令行下执行,结果直接打印出来 >>> ...

  10. Jmeter4.0 _Beanshell解析并获取json响应数据数组长度

    我们在做jmeter接口测试的时候,有时候碰到开发没返回数据total,只返回了一条条记录,可是呢,我们又需要知道到底返回了多少条数据时,咋办呢?咋办呢?咋办呢? 不要急,接下来,让我们见证奇迹是如何 ...