アニメーション　反転2

以前に質問させて頂いた[アニメーション　反転]は解決済みですが
この[アニメーション　反転2]は追加質問バージョンです。

###実現したいこと
クイズカードをクリックすると反転し答えが表示されますが、問題まで反転されてしまいます。
答え同様、問題の文字を反転しない様にしたいです。

###質問
どこをどの様に追記・修正すれば宜しいでしょうか。

お詳しい方いらっしゃいましたら宜しくお願い致します。

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 === "" ? "open" : "";
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}

itagagaki

2021/05/23 10:59

card-frontを反転させたくないという意味ですか？

mtua

2021/05/23 11:25

ご質問ありがとうございます。おっしゃる通りでcard-frontを反転させたくないという意味になります。

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に説明すると、cardの表裏両方の領域にbackface-visibility: hidden; を設定しておくと、 rotateY(180deg) した際に向かって裏側の文字が表示されなくなります。

また、front側もback側もposition: absoluteにして位置を合わせておくと裏表っぽく動きます。
3次元表示扱いにしているので、一応translateZでZ軸を少しずらしておくとより安全です。

css
1/* cardの表裏共通のスタイルとして追加 */
2#card-back, #card-front{
3  width: 100%;
4  height: 100%;
5  position: absolute;
6  left: 0;
7  top: 0;
8  backface-visibility: hidden; /* これが重要 */
9}
10
11#card-front {
12    background: #ffffff;
13    color: #d17c1c;
14    transform: translateZ(1px); /* 必須ではないが、Z軸をずらしておくと安心 */
15}
16#card-back {
17    background: #ffffff;
18    color: #08154eee;
19    transform: rotateY(180deg)  translateZ(-1px); /* 必須ではないが、Z軸をずらしておくと安心 */
20}
21/* 他は問題文のcssで問題ない */