[CSS] Create a Card Flip Animation with CSS
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的更多相关文章
- [CSS] Build a Fluid Loading Animation in CSS
In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS系列：在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
随机推荐
- Android--Facebook Login with LoginButton
1.Layout文件添加Facebook的LoginBurtton <com.facebook.widget.LoginButton android:id="@+id/authButt ...
- shell分享
shell脚本分享 一.介绍shell Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序, ...
- SpringCloud之Hystrix集群及集群监控turbine
目的: Hystrix集群及监控turbine Feign.Hystrix整合之服务熔断服务降级彻底解耦 集群后超时设置 Hystrix集群及监控turbine 新建一个springboot工程mic ...
- Java代码生成器Easy Code
EasyCode是基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml).只要是与数据库相关的代码都可以通过自定义模板来生成.支持数据库类型与java ...
- 阅读笔记——《How a Facebook rejection pushed me to start and grow a profitable business in 12 months》
阅读笔记——<How a Facebook rejection pushed me to start and grow a profitable business in 12 months> ...
- 通俗易懂的join、left join、right join、full join、cross join
内连接:列出与连接条件匹配的数据行(join\inner join) 外连接:两表合并,如有不相同的列,另外一个表显示null(left join\right join\full outer join ...
- 基于【 springBoot +springCloud+vue 项目】一 || 后端搭建
缘起 本项目是基于之前学习的一个Dubbo+SSM分布式项目进行升级,基于此项目对前后端分离项目.微服务项目进一步深入学习.之前学习了vue.springBoot.springCloud后,没有进行更 ...
- dubbo源码阅读之自适应扩展
自适应扩展机制 刚开始看代码,其实并不能很好地理解dubbo的自适应扩展机制的作用,我们不妨先把代码的主要逻辑过一遍,梳理一下,在了解了代码细节之后,回过头再来思考自适应扩展的作用,dubbo为什么要 ...
- C++线程同步与互斥总结
互斥:当多个线程访问同一个全局变量,或者同一个资源(比如打印机)的时候,需要进行线程间的互斥操作来保证访问的安全性. 临界区.互斥体.事件和信号量都可以实现线程互斥.但如果仅仅需要实现互斥功能,推荐前 ...
- pillow安装出错的解决办法
apt-get install python3-dev python3-setuptools libtiff5-dev zlib1g-dev libfreetype6-dev liblcms2-dev ...