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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
js验证账户名是否重复
2020/05/26 Javascript
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python代码实现KNN算法
2017/12/20 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
商场端午节活动方案
2014/01/29 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
开会通知
2015/04/20 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
《假如》教学反思
2016/02/17 职场文书
《将心比心》教学反思
2016/02/23 职场文书