アニメーション　反転

###実現したいこと
クイズカードをクリックしたら反転し、答えを表示するようにしたいです。

###質問
自分の分かる限りでは下記コードで何故クイズカードの部分をクリックしても反転しないのか分かりません……。
※transform: rotateY(180deg)を入れ、card.addEventListener("click",function() {flip();});も入れているのに何故か分かりません。。。

お詳しい方いらっしゃいましたら修正点教えて頂けませんでしょうか。
宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>クイズカード</title>
6    <link rel="stylesheet" type="text/css" href="question1.css">
7</head>
8<body>
9    <div id="card">
10        <div id="card-front"></div>
11        <div id="card-back"></div>
12    </div>
13    <div id="btn">次の問題</div>
14    <script src="question2.js"></script>
15</body>
16</html>

css
1//question1.css
2body {
3    margin: 0;
4    background: #b2b6b9;
5    text-align: center;
6    color: #884040ce;
7}
8
9#card {
10    margin: 100px auto 30px;
11    width: 650px;
12    height: 200px;
13    font-size: 72px;
14    line-height: 150px;
15    perspective: 150px;
16    transform-style: preserve-3d;
17    transition: transform 2s;
18}
19
20
21#card-back {
22    display: block;
23    width: 100%;
24    height: 100%;
25    position: absolute;
26    backface-visibility: hidden;
27}
28
29#card-front {
30    background: #ffffff;
31    color: #d17c1c;
32}
33#card-back {
34    background: #ffffff;
35    color: #08154eee;
36    transform: rotateY(180deg);
37}
38.open {
39    transform: rotateY(180deg);
40}
41
42#btn {
43    width: 100px;
44    margin: 0 auto;
45    padding: 20px;
46    background: #303e44;
47    box-shadow: 0 4px 0 #0a9aca;
48    box-align: center;
49}
50#btn:hover {
51    opacity: 0.7;
52}

JavaScript
1//question2.js
2"use strict";
3
4var words = [
5    { key: "音符　♪", a: "8分音符" },
6    { key: "音符　♩", a: "4分音符" },
7    { key: "音符　♫", a: "16分音符" },
8    { key: "音符　♭", a: "フラット" },
9    { key: "音符　♯", a: "シャープ"},
10    { key: "鰯", a: "いわし"},
11    { key: "鰤", a: "ぶり"},
12    { key: "鮪", a: "まぐろ"},
13    { key: "鰆", a: "さわら"},
14    { key: "鱧", a: "はも"},
15    { key: "鯖", a: "さば"},
16    { key: "鰈", a: "かれい"},
17    { key: "鰯", a: "いわし"}
18];
19var stock = [];
20
21let card = document.getElementById("card");
22let cardFront = document.getElementById("card-front");
23let cardBack = document.getElementById("card-back");
24let btn = document.getElementById("btn");
25
26card.addEventListener("click",function() {
27    flip();
28});
29
30
31btn.addEventListener("click",function() {
32   next(); 
33});
34
35
36function flip() {
37    card.className = card.className === "" ? "opne" : "";
38}
39
40function next() {
41    if (card.className === "open") {
42        card.addEventListener("transitionend", setCard);
43        flip();
44    } else {
45        setCard();
46    }
47}
48
49function setCard() {
50    var num = Math.floor(Math.random() * words.length);
51    cardFront.innerHTML = words[num]["key"];
52    cardBack.innerHTML = words[num]["a"];
53    card.removeEventListener("transitionend", setCard);
54}