# react-card-flipを使って回転するカードレイアウトを作る

[GROWI](https://tips.weseek.co.jp/5e393927e848c600487d6a01) でログイン画面の [React](https://tips.weseek.co.jp/5e3930c8e848c600487d69ed) 化に伴い、 JQuery で実現していたログインと新規登録が引っくり返る画面を実装する必要がありました。

今までは `transform: rotateY(180deg);`を使って回転。 z-index との相性も良くなく動作が安定せず...

そこで導入したのが [react-card-flip](https://www.npmjs.com/package/react-card-flip)。  
とても簡単に回転するフォームを実現できました。[該当のPRはこちら](https://github.com/weseek/growi/pull/2155)

Youtube に解説動画が上がっているのでさっくり把握するには良さそうです → https://www.youtube.com/watch?v=qrZFo1jLG-4&ab_channel=HongLy

GROWI のようにログインと新規ユーザー登録のような画面ではすごく相性いいと思います。

こういった回転する挙動はトランプゲームとかでも使えそうです。

![画面収録 2020-05-12 22.48.03.mov.gif](/attachment/5ebaa93fd3055000488bd529)

フリップに感動 :dizzy_face:

```js:example.js
import { useState } from "react";
import ReactCardFlip from "react-card-flip";

export default ({ closeNav }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  function flipCard() {
    setIsFlipped(!isFlipped);
  }

  return (
    <div className="container" onClick={closeNav}>
      <ReactCardFlip isFlipped={isFlipped} flipDirection="vertical">
        <div className="front" onClick={flipCard}>
          <h2>Introduction</h2>
          <p>名前 : itizawa</p>
          <p>仕事 : システムエンジニア</p>
          <p>
            技術 :
            Javascript・Node.js・React・Next.js・MongoDB・Bootstrap4・RESTfulAPI
          </p>
        </div>
        <div className="back" onClick={flipCard}>
          <h2>Personal</h2>
          <p>趣味 : 映画観賞</p>
        </div>
      </ReactCardFlip>
    </div>
  );
};
```

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/react-card-flipを使って回転するカードレイアウトを作る
- Permalink: https://tips.weseek.co.jp/5ebaa05ad3055000488bd526
- Parent: [開発日記](/5e3d294bcff797004b16abba.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 20 total
  - [GROWIのAPIを使用したアプリケーション](/5e5bd0e3e7f8db0048df3a08.md)
  - [GitとGitHubの違い](/5e417dcadecd0a0049953ad7.md)
  - [LDAP攻略への道](/5e48b2561ec5e4004811d4e9.md)
  - [Migrationsファイルを作成する](/5e9d1dc7b682620049e55a64.md)
  - [QiitaでGROWIが設計書システムとして紹介されました](/5e535a04eb17ce0048b9fb13.md)
  - [UserManagement](/65069da24603e7ff39a6b3d2.md)
  - [aタグ以外での画面遷移](/5e9cfd51b682620049e55a5d.md)
  - [jestを使ったテストを初実装しました](/5ef1ed225eea4b004a1912b2.md)
  - [npm とyarn の違いを簡単に説明](/5e3e6822591d7f0048b3cc5e.md)
  - [throttleでスクロールイベントを間引く](/5e8de43931511b0048ecf612.md)
  - [vuepressのテンプレート内で二重波括弧をエスケープ](/5f16ecf4c2f6150048b2955b.md)
  - [なぜsetStateをComponentDidMountで使用してはいけないのか](/5eb7728458c8ea00480d0825.md)
  - [アジャイルとウォーターフォール](/5e4137d343c1c400499b6bac.md)
  - [セルフレビューはどこまで確認しようか](/5e3d2adfcff797004b16abbe.md)
  - [ソート機能の実装](/5e8aadc15245e70048c22c7c.md)
  - [タスクを円滑にこなすために必要な垂れ流しとは](/5e47a18a927c020048448a18.md)
  - [ページ内リンクの実装](/5e93c9d511007300489677ff.md)
  - [レビュー依頼する際に確認すること](/5e3ae41225751e00499297f6.md)
  - [動作確認用にページをたくさん作りたい](/5f80326633588b0048eaf865.md)
  - [間違えてマージしてさらにプッシュしちゃった](/5e9d176db682620049e55a60.md)
- Last updated: 2020-05-12T13:49:17.832Z by deleted_at_1672138397219
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5ebaa05ad3055000488bd526