网页技术交流
 
发新帖
楼主: 零五零八
查看: 626|回复: 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.                         }

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

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

  45.                         .front1 {
  46.                                 z-index: 2;
  47.                                 transform: rotateY(0deg);
  48.                                 -webkit-transform: rotateY(0deg);
  49.                         }

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

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


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