立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › HTML5实现移动端点击翻牌功能
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 913|回复: 0

[使用教程] HTML5实现移动端点击翻牌功能

[复制链接]
零五零八 发表于 2021-1-29 21:41:23 | 显示全部楼层
效果

                                                      1.gif


  • 一个大小的两个面，在同一位置上
  • 正面的Y轴旋转为0度
  • 背面的Y轴旋转180度
  • 隐藏被旋转的 div 元素的背面（backface-visibility）
  • 点击的时候同时改变正面和背面的旋转角度，给一个动画的时间（transition）
记得换图片路径哦~


  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>css3 翻牌</title>
  6.         </head>
  7.         <body>
  8.                 <style>
  9.                         * {
  10.                                 margin: 0;
  11.                                 padding: 0;
  12.                         }

  14.                         ul,
  15.                         li {
  16.                                 margin: 0;
  17.                                 padding: 0;
  18.                                 list-style: none;
  19.                         }
  20.                         
  21.                         .flip-container,
  22.                         .front1,
  23.                         .back1 {
  24.                                 width: 283px;
  25.                                 height: 283px;
  26.                         }
  27.                         
  28.                         .front1,
  29.                         .back1 {
  30.                                 position: absolute;
  31.                                 top: 0;
  32.                                 left: 0;
  33.                                 backface-visibility: hidden;
  34.                                 -webkit-backface-visibility: hidden;
  35.                                 transition: 0.6s ease-out;
  36.                                 -webkit-transition: .6s ease-out;
  37.                                 transform-style: preserve-3d;
  38.                                 -webkit-transform-style: preserve-3d;
  39.                         }

  41.                         .front1 img,
  42.                         .back1 img {
  43.                                 width: 283px;
  44.                                 height: 283px;
  45.                                 overflow: hidden;
  46.                         }

  48.                         .front1 {
  49.                                 z-index: 2;
  50.                                 transform: rotateY(0deg);
  51.                                 -webkit-transform: rotateY(0deg);
  52.                         }

  54.                         .back1 {
  55.                                 z-index: 1;
  56.                                 transform: rotateY(-180deg);
  57.                                 -webkit-transform: rotateY(-180deg);
  58.                         }
  59.                         
  60.                         .back2 {
  61.                                 transform: rotateY(0deg);
  62.                                 -webkit-transform: rotateY(0deg);
  63.                                 z-index: 2;
  64.                         }
  65.                         
  66.                         .front2 {
  67.                                 transform: rotateY(180deg);
  68.                                 -webkit-transform: rotateY(180deg);
  69.                                 z-index: 1
  70.                         }
  71.                 </style>
  72.                 <ul>
  73.                         <li class="flip-container ">
  74.                                 <div class="front1 flipper"><img src="./快捷方式/壁纸/2.jpg"></div>
  75.                                 <div class="back1 flipper"><img src="./快捷方式/壁纸/1.jpg"></div>
  76.                         </li>
  77.                 </ul>
  78.         </body>
  79.         <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  80.         <script>
  81.                 let is1 = true;

  83.                 document.getElementsByClassName('flip-container')[0].onclick = function(){
  84.                         if(is1) {
  85.                                 $(this).find('.front1').addClass('front2');
  86.                                 $(this).find('.back1').addClass('back2');
  87.                         }else{
  88.                                 $(this).find('.front1').removeClass('front2');
  89.                                 $(this).find('.back1').removeClass('back2');
  90.                         }
  91.                         is1 = !is1;
  92.                 }
  93.         </script>
  94. </html>
复制代码


回复

举报

返回列表
快速回复 返回顶部 返回列表