SOURCE

let btns = document.getElementsByTagName('button');
let box = document.getElementsByClassName('s');
var list = [1,2,3,4,5,6,7,8,9];
btns[0].addEventListener('click',() => {
  list = list.sort(randomsort);
  goturn(9,3);
});
btns[2].addEventListener('click',() => {
  goturn(9,1); 
});
btns[3].addEventListener('click',() => {
  goturn(9,2); 
});

window.addEventListener('click',(event) => {
  let h2_ = document.getElementsByTagName('h2')[0];
  if(event.target.className == 's btn_turns')
    h2_.innerHTML = '内容为: ' + event.target.innerHTML;
});

function goturn(length,id){
  for(var i=0;i<length;i++){
		var box = document.getElementsByClassName('s');
    if(id==1){
      delays(box[i],'s btn_turns',i);
    }else if(id==2) {
    	delays(box[i],'s',i);
    }else {
    	box[i].innerHTML = list[i];
    }   
  }
}

function delays(index,_classNames,len){
  setTimeout(()=>{
    index.className = _classNames;
  },len*100);  
}

function randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
}

<div class="f">
  <div class="s">1</div>
  <div class="s">2</div>
  <div class="s">3</div>
</div>
<div class="f">
  <div class="s">4</div>
  <div class="s">5</div>
  <div class="s">6</div>
</div>
<div class="f">
  <div class="s">7</div>
  <div class="s">8</div>
  <div class="s">9</div>
</div>
<button>打乱</button>
<button>开始</button>
<button>翻转</button>
<button>还原</button>
<h2></h2>

.f {
  display: flex;
}
.s {
  width: 160px;
  height: 160px;
  margin: 3px;
  text-align: center;
  border: 1px dashed blue;
  border-radius: 4%;
  font-size: 30px;
  line-height: 160px;
  background-color: #fcd23b;
  transform: rotateY(0deg);
  transition: transform 2s;
  user-select: none;
}
.btn_turns{
  transform: rotateY(180deg);
  transition: transform 2s;
  color: #fcd23b; 
}

.s:hover {
  animation: hover_turn .5s 2;  
}

@keyframes btn_turn {
  0%{transform: rotateY(0deg);}
  100%{transform: rotateY(180deg);}
}

@keyframes hover_turn {
  0% {  opacity:0.8;  }
  20% {    opacity:0.6;  }
  40% {    opacity:0.4;  }
  60% {    opacity:0.2;  }
  80% {    opacity:0.4;  }
  100% {    opacity:0.6;  }
}