HTML5实现移动端点击翻牌功能


Posted in HTML / CSS onOctober 23, 2020

效果

HTML5实现移动端点击翻牌功能

  • 一个大小的两个面,在同一位置上
  • 正面的Y轴旋转为0度
  • 背面的Y轴旋转180度
  • 隐藏被旋转的 div 元素的背面(backface-visibility)
  • 点击的时候同时改变正面和背面的旋转角度,给一个动画的时间(transition)

记得换图片路径哦~

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3 翻牌</title>
	</head>
	<body>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.flip-container,
			.front1,
			.back1 {
				width: 283px;
				height: 283px;
			}
			
			.front1,
			.back1 {
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				transition: 0.6s ease-out;
				-webkit-transition: .6s ease-out;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
			}

			.front1 img,
			.back1 img {
				width: 283px;
				height: 283px;
				overflow: hidden;
			}

			.front1 {
				z-index: 2;
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
			}

			.back1 {
				z-index: 1;
				transform: rotateY(-180deg);
				-webkit-transform: rotateY(-180deg);
			}
			
			.back2 {
				transform: rotateY(0deg);
				-webkit-transform: rotateY(0deg);
				z-index: 2;
			}
			
			.front2 {
				transform: rotateY(180deg);
				-webkit-transform: rotateY(180deg);
				z-index: 1
			}
		</style>
		<ul>
			<li class="flip-container ">
				<div class="front1 flipper"><img src="./快捷方式/壁纸/2.jpg"></div>
				<div class="back1 flipper"><img src="./快捷方式/壁纸/1.jpg"></div>
			</li>
		</ul>
	</body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		let is1 = true;

		document.getElementsByClassName('flip-container')[0].onclick = function(){
			if(is1) {
				$(this).find('.front1').addClass('front2');
				$(this).find('.back1').addClass('back2');
			}else{
				$(this).find('.front1').removeClass('front2');
				$(this).find('.back1').removeClass('back2');
			}
			is1 = !is1;
		}
	</script>
</html>

到此这篇关于HTML5实现移动端点击翻牌功能的文章就介绍到这了,更多相关html5点击翻牌内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 #HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 #HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 #HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 #HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 #HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 #HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 #HTML / CSS
You might like
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
xtree.js 代码
2007/03/13 Javascript
google地图的路线实现代码
2009/08/20 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
高一新生军训感言
2014/03/02 职场文书
预备党员表决心书
2014/03/11 职场文书
搞笑征婚广告词
2014/03/17 职场文书
2014年教研组工作总结
2014/11/26 职场文书
紫日观后感
2015/06/05 职场文书
教师外出学习心得体会
2016/01/18 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang