カードをひっくり返しているように見せる！【css+jQuery】 #JavaScript

初投稿です！！

初心者ですが一生懸命書いてゆきますので、間違っているところなどございましたらご指摘お願いいたします。

今回は、カードがひっくり返って見える実装をしました。

【HTML】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>くるっとさせるcss</title>
</head>
<body>
    <div class="card"> </div>

    <script src="./js/jquery-3.6.0.min (2).js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

【CSS】

/* スタイルのcss */
.card{
    width: 300px;
    height: 400px;
    background-color: aquamarine;
    margin: 100px;
}

/* クリックした時の動きのcss */
.card__item__active{
    transform:rotateY(360deg);    /*回転*/
    transition: 3s;              /*3秒かけて*/
}

【jQuery】

$(".card").on('click', function(){
    $(".card").addClass("card__item__active");
});

このままだと、カードが360度回転して戻ってきてしまうと思います。
裏返して見えるようにしたいので、
transform:rotateY(360deg)の角度を
180度に変えていきます。

そして、回転している間にsetTimeoutでタイミングを調整しつつ好きな画像などを挿入すれば、裏返って見えるようになります。

【CSS】

/* スタイルのcss */
.card{
    width: 300px;
    height: 400px;
    background-color: aquamarine;
    margin: 100px;
    transform:rotateY(180deg);   /*カードが裏返って見えるようにあらかじめ180度回転させておく*/
}

/* クリックした時の動きのcss */
.card__item__active{
    transform:rotateY(360deg);    /*回転*/
    transition: 3s;              /*3秒かけて*/
}

.card img{
    width: 300px;
    height: 400px;               /*画像のサイズ*/
}

【jQuery】

$(".card").on('click', function(){
    $(".card").addClass("card__item__active"); //アクティブクラスを付与して回転
    setTimeout(() => {
        $(".card").html('<img src="./florist-g0d4688c17_640.jpg" alt=""></img>');
    }, 1000);                                  //1秒かけてcardクラスに画像を追加
});

カードを裏返す実装は、表と裏のdiv要素をHTMLで作るやり方もあるようですが、今回はこのようなやり方でチャレンジしてみました。