当前位置:主页 > 站长学院 > 网页设计 >

网页实现点击变换图片的实现方法与示例代码

YouYou 发布于 2021-01-27
频道:网页设计

网页实现点击变换图片的效果图:

网页实现点击变换图片的效果图

实现方法:

一个大小的两个面,在同一位置上

正面的Y轴旋转为0度

背面的Y轴旋转180度

隐藏被旋转的 div 元素的背面(backface-visibility)

点击的时候同时改变正面和背面的旋转角度,给一个动画的时间(transition)

记得换图片路径哦~

示例代码:

  1. <!doctype html> 
  2.  
  3. <html> 
  4.  
  5.     <head> 
  6.  
  7.         <meta charset="utf-8"
  8.  
  9.         <title>css3 翻牌</title> 
  10.  
  11.     </head> 
  12.  
  13.     <body> 
  14.  
  15.         <style> 
  16.  
  17.             * { 
  18.  
  19.                 margin: 0; 
  20.  
  21.                 padding: 0; 
  22.  
  23.             } 
  24.  
  25.  
  26.  
  27.             ul, 
  28.  
  29.             li { 
  30.  
  31.                 margin: 0; 
  32.  
  33.                 padding: 0; 
  34.  
  35.                 list-style: none; 
  36.  
  37.             } 
  38.  
  39.              
  40.  
  41.             .flip-container, 
  42.  
  43.             .front1, 
  44.  
  45.             .back1 { 
  46.  
  47.                 width: 283px; 
  48.  
  49.                 height: 283px; 
  50.  
  51.             } 
  52.  
  53.              
  54.  
  55.             .front1, 
  56.  
  57.             .back1 { 
  58.  
  59.                 position: absolute; 
  60.  
  61.                 top: 0; 
  62.  
  63.                 left: 0; 
  64.  
  65.                 backface-visibility: hidden; 
  66.  
  67.                 -webkit-backface-visibility: hidden; 
  68.  
  69.                 transition: 0.6s ease-out; 
  70.  
  71.                 -webkit-transition: .6s ease-out; 
  72.  
  73.                 transform-style: preserve-3d; 
  74.  
  75.                 -webkit-transform-style: preserve-3d; 
  76.  
  77.             } 
  78.  
  79.  
  80.  
  81.             .front1 img, 
  82.  
  83.             .back1 img { 
  84.  
  85.                 width: 283px; 
  86.  
  87.                 height: 283px; 
  88.  
  89.                 overflow: hidden; 
  90.  
  91.             } 
  92.  
  93.  
  94.  
  95.             .front1 { 
  96.  
  97.                 z-index: 2; 
  98.  
  99.                 transform: rotateY(0deg); 
  100.  
  101.                 -webkit-transform: rotateY(0deg); 
  102.  
  103.             } 
  104.  
  105.  
  106.  
  107.             .back1 { 
  108.  
  109.                 z-index: 1; 
  110.  
  111.                 transform: rotateY(-180deg); 
  112.  
  113.                 -webkit-transform: rotateY(-180deg); 
  114.  
  115.             } 
  116.  
  117.              
  118.  
  119.             .back2 { 
  120.  
  121.                 transform: rotateY(0deg); 
  122.  
  123.                 -webkit-transform: rotateY(0deg); 
  124.  
  125.                 z-index: 2; 
  126.  
  127.             } 
  128.  
  129.              
  130.  
  131.             .front2 { 
  132.  
  133.                 transform: rotateY(180deg); 
  134.  
  135.                 -webkit-transform: rotateY(180deg); 
  136.  
  137.                 z-index: 1 
  138.  
  139.             } 
  140.  
  141.         </style> 
  142.  
  143.         <ul> 
  144.  
  145.             <li class="flip-container "
  146.  
  147.                 <div class="front1 flipper"><img src="./快捷方式/壁纸/2.jpg"></div> 
  148.  
  149.                 <div class="back1 flipper"><img src="./快捷方式/壁纸/1.jpg"></div> 
  150.  
  151.             </li> 
  152.  
  153.         </ul> 
  154.  
  155.     </body> 
  156.  
  157.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
  158.  
  159.     <script> 
  160.  
  161.         let is1 = true; 
  162.  
  163.  
  164.  
  165.         document.getElementsByClassName('flip-container')[0].onclick = function(){ 
  166.  
  167.             if(is1) { 
  168.  
  169.                 $(this).find('.front1').addClass('front2'); 
  170.  
  171.                 $(this).find('.back1').addClass('back2'); 
  172.  
  173.             }else
  174.  
  175.                 $(this).find('.front1').removeClass('front2'); 
  176.  
  177.                 $(this).find('.back1').removeClass('back2'); 
  178.  
  179.             } 
  180.  
  181.             is1 = !is1; 
  182.  
  183.         } 
  184.  
  185.     </script> 
  186.  
  187. </html> 

    打赏是您对我们最大的鼓励!

    扫一扫打赏
    相关评论

    评论列表(条)

      ×
      QQ在线客服

      服务中心

      zfzf