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. 影响MySQL的性能（一）磁盘的选择

    一.磁盘的选择也是影响MySQL的性能的重大因素之一 1.使用传统的机器硬盘读取数据的过程 2.如何选择传统机器硬盘的因素 二.使用RAID增加传统机器硬盘的性能 1.什么是RAID技术 2.常见的R ...

  2. Weave跨主机实现docker互通，固定ip及dns使用介绍

    一.weave介绍Weave是由weaveworks公司开发的解决Docker跨主机网络的解决方案,现在就采用它来实现Docker多宿主机互联的目的,它能够创建一个虚拟网络,用于连接部署在多台主机上的 ...

  3. day46——特殊符号、标签分类、标签

    day46 特殊符号  --空格 >大于号 <小于号 ... 找HTML特殊符号 标签分类 块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,div,p,h1-h6,hr,f ...

  4. DSP未来五大发展趋势

    在4G无线通信领域,数据吞吐量已经达到了3G时代的100到1000倍;在多媒体处理器领域,每天都有新的标准涌现出来;在更多其它DSP应用领域,密集的数据处理器需求不断给处理器设计团队带来新的挑战.随着 ...

  5. Spring MVC传输对象属性

    今天搬砖时遇到一个问题,前端使用JSP+form传输数据,后台使用Spring MVC接收,但是接收到的对象属性一直是null,找了好久才发现原因,代码如下 前端代码   后端代码   需要注意一点 ...

  6. Linux -- file 命令

    1.file命令含义 file命令用于接受一个文件作为参数并执行某些测试,以确定正确的文件类型 2.file命令参数以及实例 (1)file命令查看文件类型 $ file /etc/irbrc /et ...

  7. quartz2.3.0（四）JobDataMap—带状态集合的定时器内置集合

    任务类 package org.quartz.examples.example4; import java.util.Date; import org.quartz.DisallowConcurren ...

  8. twbsPagination.js分页插件

    分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现 ...

  9. vue watch 的简单使用

    在项目开发中遇到的需求,这点写第一个dome 监听父组件传过来的值发送变化 在子组件中 <template> <div class="components"> ...

  10. sqlite移植

    编译 # tar xvf sqlite-3.6.16.tar.gz # cd sqlite-3.6.16 # ./configure # ./configure --host=arm-linux -- ...