这是一款使用纯js和CSS3来制作的仿天猫商品品牌图片墙换一批动画特效。该特效中，当用户点击了品牌图片墙上右下角的按钮时，所有的品牌图片会水平翻转360度，然后显示另外一批品牌图片。

使用方法

在页面中引入jquery和样式文件style.css。

HTML结构

该品牌图片使用一个无序列表作为HTML结构：

    

        

            

                
            
            

                
            
        
        

            
            
关注人数 323.4万
            点击进入
        
    
    

        

            

                
            
            

                
            
        
        

            
            
关注人数 323.4万
            点击进入
        
    
    ......
    

        

        换一批
    
         
                

JavaScript

在页面DOM元素加载完毕之后，通过下面的js代码来完成按钮的点击事件，以及品牌图片的翻转动画。

window.onload = function () {
  var clickTimes = 1;

  //总列数
  var lineCount = 6;

  var btnRefresh = document.querySelector("#btnRefresh");
  var iconRefresh = document.querySelector(".iconRefresh")

  var img3DList = document.querySelectorAll(".img-3d");
  var len = img3DList.length;

  btnRefresh.onclick = function () {
      iconRefresh.style.transition = ".3s linear";
      iconRefresh.style.transform = "rotate("+360*clickTimes+"deg)";

      for (var i = 0; i< len; i++){

        var colNum = parseInt(i/lineCount);
        var rowNum = i%lineCount;
        var delayTime = (colNum+rowNum)*100;


          img3DList[i].style.transition = ".3s "+delayTime+"ms linear";
          img3DList[i].style.transform = "rotateY("+180*clickTimes+"deg)";
       }

      clickTimes++;
  }
}