Reactを使って、クリックするとカードのように裏表が回転するコンポーネントを作成

はじめに

クリックするとクルクルと回転して、裏表を表示してくれるコンポーネントを作成したので共有したいと思います。

🔽参考GIF

実装

jsxファイルに以下を記述して、コンポーネントを宣言します。
解説として、簡単なコメントを入れています。

import "./styles.css";
import { useState } from "react";

// 裏面と表面に表示する要素をpropsで受け取る
const Card = (props) => {

  const [isFlipped, setIsFlipped] = useState(false);

  // クリック時に裏表をstateに割り当て
  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  // 裏表によってclassNameや表示する要素を変えている
  return (
    <div
      className={`card ${isFlipped ? "is-flipped" : ""} `}
      onClick={handleClick}
    >
      <div className="card-inner">
        <div className={`card-element ${isFlipped ? "is-flipped" : ""}`}>
          {isFlipped ? (
            <p className="card-back-element">{props.backElement}</p>
          ) : (
            <p className="card-front-element">{props.frontElement}</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default Card

cssファイルは以下のように記述します。
ほとんどが見た目に関わる部分なので、大切な部分にはコメントを入れてます。

.card {
  width: 300px;
  height: 250px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* transform-style: preserve-3d; */
  transition: transform 0.5s; /* 回転のアニメーション*/
}

.card.is-flipped .card-inner {
  transform: rotateX(180deg); /*クリックされると回転*/
}

.card-element {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: #ffffff;
  box-shadow: 0 3px 10px 5px rgba(131, 116, 94, 0.1);
  border: 1px solid black;
  border-radius: 10px;
  transition: box-shadow 0.3s ease-in-out;
}

.card-element.is-flipped {
  box-shadow: 0 -3px 10px 5px rgba(131, 116, 94, 0.1);
}

.card-front-element {
  font-weight: bold;
}

.card-back-element {
  transform: rotateX(180deg); /*カードが回転して逆になるから、裏面の要素は回転された状態に*/
  display: "inline-block";
}

呼び出す際の例はこちらです。

<Card frontElement="表" backElement="裏" />

おわりに

見た目なんかは好きに編集してみてください！
参考になると幸いです！

※補足
初めは、transform-style: preserve-3dを使って実装したんですけど、カードリストを表示した際のふとした時にエラーが出たんで、今回紹介したものに変えました。
なぜエラーになるのか分からないままなので、詳しい方がいればご教授ください！