当前位置:Web前端 > > 正文

html5清除浮动的方法(HTML5实现移动端点击翻牌功能)

时间:2021-10-21 08:27:47类别:Web前端

html5清除浮动的方法

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

效果

html5清除浮动的方法(HTML5实现移动端点击翻牌功能)

记得换图片路径哦~

  • <!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 ">
    				<li class="front1 flipper"><img src="./快捷方式/壁纸/2.jpg" alt="html5清除浮动的方法(HTML5实现移动端点击翻牌功能)" border="0" />
    
  • 到此这篇关于HTML5实现移动端点击翻牌功能的文章就介绍到这了,更多相关html5点击翻牌内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐