フリップカード

手順

1. maincontainerを用意する（カードを反転させるための容器）
2. cardcontainerを用意する（カードを反転させる機能）
3. thefront, thebackを用意する（カード本体）

maincontainerという箱を用意して、その中にthefront, thebackという２枚のカードを入れて、それをcardcontainerという手でひっくり返すイメージ。

コード

sample.html

<style>
  .maincontainer{
    position:relative;
    width:250px;
    height:300px;
  }
  
  .thecard{
    position:absolute;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition: all 0.5s ease;
  }
  
  .thecard:hover {
    transform:rotateY(180deg);
  }
  
  .thefront{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    background:#ffc728;
    color:#333;
    text-align:center;
    font-family:'zilla slab', sans-serif;
    border-radius:20px;
    font-size:18px;
    font-weight:bold;
  }
  
  .theback {
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    background:#fafafa;
    color:#333;
    transform: rotateY(180deg);
  }
  
</style>

<div class="maincontainer">
<div class="thecard">
<div class="thefront">front of card</div>
<div class="theback">back of card</div>
</div>
</div>

参考

こっちも参考になる

sample.jsx

    <div>
      <section className="bg-gray-900 h-screen flex justify-center items-center gap-x-16 text-white">
        <div className="w-[300px] h-[420px] bg-transparent cursor-pointer group perspective">
          <div className="relative preserve-3d group-hover:my-rotate-y-180 w-full h-full duration-1000">
            <div className="absolute backface-hidden border-2 w-full h-full">
              <img src="xxx.png" className="w-full h-full" />
            </div>
            <div className="absolute my-rotate-y-180 backface-hidden w-full h-full bg-gray-100">
              <div className="text-center flex flex-col items-center justify-center h-full text-gray-800">
                <h1>The King's Man</h1>
                <p className="my-2">9.0 Rating</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic, nemo exercitationem repellendus aut sapiente unde nisi delectus? Commodi quas unde autem vero voluptas voluptatibus eligendi. Necessitatibus magni sequi quasi aspernatur.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>