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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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
PHP5 安装方法
2007/01/15 PHP
PHP session会话的安全性分析
2011/09/08 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php简单中奖算法(实例)
2017/08/15 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
不用游标的SQL语句有哪些
2012/09/07 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
就业协议书怎么填
2014/04/11 职场文书
培训讲师岗位职责
2014/04/13 职场文书
2014年仓库工作总结
2014/11/20 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
Python中的pprint模块
2021/11/27 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
Python字符串的转义字符
2022/04/07 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android