Javascript 如何将动画添加到翻转瓷砖记忆游戏

这是全部代码，包括css、javascript。 我试着去做，当我点击盒子时，它会以动画的形式旋转到另一边，显示一个字符

这是css代码

<style>
.tile{
    width: 150px;
    /*height: 150px;*/
    background-color: black;
    float: left;
    margin: 10px;
    font-size: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;

}
p{
    font-size: 50px;
}

span{
    visibility: hidden;
}
</style>
<div id="game_board">
    <div class="tile" onclick="flipTile(this);"><span>A</span></div>
    <div class="tile" onclick="flipTile(this);"><span>A</span></div>
    <div class="tile" onclick="flipTile(this);"><span>B</span></div>
    <div class="tile" onclick="flipTile(this);"><span>B</span></div>
    <div class="tile" onclick="flipTile(this);"><span>C</span></div>
    <div class="tile" onclick="flipTile(this);"><span>C</span></div>
    <div class="tile" onclick="flipTile(this);"><span>D</span></div>
    <div class="tile" onclick="flipTile(this);"><span>D</span></div>
</div>

.瓷砖{
宽度：150px；
/*高度：150像素*/
背景色：黑色；
浮动：左；
利润率：10px；
字体大小：100px；
填充顶部：25px；
垫底：25px；
文本对齐：居中；
}
p{
字体大小：50px；
}
跨度{
可见性：隐藏；
}
A.
A.
B
B
C
C
D
D

这是javascript代码，其中包含翻转平铺函数

<script>
    var memory_array = ["A", "A", "B", "B","C", "C", "D", "D","E", "E", "F", "F","G", "G", "I", "I"];
    var memory_tiles = [];

    var memory_tile_tmp = null;
    var can_play = true;

    function memory_tile_shuffle(array){
        var i = array.length, j, temp;
        while(--i > 0){
            j = Math.floor(Math.random() * (i+1));
            temp = array[j];
            array[j] = array[i];
            array[i] = temp;
        }
        return array;
    }

    function newBoard(){
        var output = '';
        memory_array=memory_tile_shuffle(memory_array);
        console.log("memory_array "+memory_array);
        for(var i = 0; i < memory_array.length; i++){
            output += '<div class="tile" onclick="flipTile(this)"><span>'+memory_array[i]+'</span></div>';
        }
        document.getElementById('game_board').innerHTML = output;
        console.log(output);
    }

    newBoard();
    console.log(memory_array);
    function flipTile(tile){

        if(memory_tiles.length == 0){
            tile.firstChild.style.visibility="visible";
            tile.style.backgroundColor = "grey";
            memory_tile_tmp = tile; 
            memory_tiles.push(tile);
        }else if(memory_tiles.length == 1 && memory_tiles[0]!= tile){
            memory_tiles.push(tile);
            tile.firstChild.style.visibility="visible";
            tile.style.backgroundColor = "grey";//memory_tile_tmp = null;

            if(memory_tiles[0].firstChild.innerHTML == memory_tiles[1].firstChild.innerHTML){
                //USPEŠEN PAR NE NAREDIM NIČ
                memory_tiles = [];
            }else{
                setTimeout(function(){ 
                    memory_tiles[0].firstChild.style.visibility="hidden";
                    memory_tiles[0].style.backgroundColor = "black";
                    memory_tiles[1].firstChild.style.visibility="hidden";
                    memory_tiles[1].style.backgroundColor = "black";
                    memory_tiles = [];
                    }, 
                1000);
            }
        }


    }
</script>

变量内存数组=[“A”、“A”、“B”、“B”、“C”、“C”、“D”、“D”、“E”、“E”、“F”、“F”、“G”、“G”、“I”、“I”]；
var memory_tiles=[]；
var memory_tile_tmp=null；
var can_play=true；
函数内存\u平铺\u洗牌（数组）{
变量i=数组长度，j，温度；
而（--i>0）{
j=数学地板（数学随机（）*（i+1））；
温度=阵列[j]；
数组[j]=数组[i]；
数组[i]=温度；
}
返回数组；
}
函数newBoard（）{
var输出=“”；
memory\u array=memory\u tile\u shuffle（memory\u array）；
log（“内存数组”+内存数组）；
对于（变量i=0；i

翻转动画只需

变换即可完成：旋转（180度）。然而，在原始JavaScript中翻转卡片实际上非常复杂，因为您需要同时使用
sin
和
cos
以及计时器。我建议只需使用转换创建一个CSS类，然后通过JavaScript点击应用它。请参阅。虽然在IE/FF/Chrome/Safari中链接的JSFIDLE（）似乎可以很好地工作，但我们无法将其标记为重复，因为这个问题没有公认的答案。