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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
先进工作者获奖感言
2014/02/08 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
旷课检讨书
2015/01/26 职场文书
个人政治思想总结
2015/03/05 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
教你使用TensorFlow2识别验证码
2021/06/11 Python