HTMLとCSSで作るひっくり返るプロフィールカード【webデザイン】

2023年1月13日

今回は回転するプロフィールカードを作ります。お洒落な自己紹介ページやスタッフ一覧などのページにどうでしょうか。

HTMLとCSSで作るひっくり返るプロフィールカード【webデザイン】

最初に全てのコードをお見せして、後から細かく説明しますので、コードだけ知りたい方はコピーしてすぐに使ってみてください！

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
    <div class="card middle">
        <div class="front">
            <img src="img.jpg" alt="">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>DarkCode</h2>
                <span>Youtube Channel</span>
                <div class="sm">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

CSS↓

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: "montserrat";
}
body{
    background: #333;
}
.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.card{
    cursor: pointer;
    width: 340px;
    height: 480px;
}
.front,.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}
.front img{
    height: 100%;
}
.front{
    transform: perspective(600px) rotateY(0deg);
}
.back{
    background: #f1f1f1;
    transform: perspective(600px) rotateY(180deg);
}
.back-content{
    color: #2c3e50;
    text-align: center;
    width: 100%;
}
.sm{
    margin: 20px 0;
}
.sm a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    font-size: 18px;
    transition: .4s;
    border-radius: 50%;
}
.sm a:hover{
    background:#2c3e50;
    color: white;
}
.card:hover > .front{
    transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
    transform: perspective(600px) rotateY(0deg);
}

CSSの解説

その1　Fontawesomeのアイコンを使う

いつものようにフォントオウサムのページに行きCSSのリンクを取得します。今回使ったCSSはココの

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

です。これをコピーしてタイトルタグの下にlinkタグで紐付けます。

その2　全てを中央揃え

まずcard、front、backのボックスをposition:absolute;で画面の中央に揃え、重ねます。

裏面のテキストやSNSアイコンも中央揃えにしています。

.back-content{
    color: #2c3e50;
    text-align: center;
    width: 100%;
}
.sm{
    margin: 20px 0;
}
.sm a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    font-size: 18px;
    transition: .4s;
    border-radius: 50%;
}

その3　front、backの回転順序

この回転の仕組みは大きく三段階に別れていると仮定すると理解しやすいです。

1　ページロード前

2　ページロード後（最初の状態）

3　ホバー後

それぞれのfrontとbackのCSSを解説します。

1　ページロード前

.front,.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

大きさをcardの340px×480pxに設定し、はみ出る画像はoverflow:hidden;で切り取ります。bodyを基準にposition:absolute;で中央に重ねて配置します。そしてbackface-visibility: hidden;と設定します。ここが重要な設定です。

backface-visibilityは3D空間でX軸やY軸を基準に回転した場合に、要素の背面を描画するかを設定します。hiddenとすることで、背面が見えるタイミングで非表示にします。

frontのボックスがbackのボックスの裏に隠れている状態です。

2　ページロード後（最初の状態）

.front{
    transform: perspective(600px) rotateY(0deg);
}
.back{
    background: #f1f1f1;
    transform: perspective(600px) rotateY(180deg);
}

ページがロードされると、transformのcssが動き出します。transform: perspective(600px) rotateY(0deg);では回転深度と回転角度を設定しています。

それぞれのロード後の動きはこうです。

front　奥行き600pxで0度回転させる。
→０度回転した状態が最初の状態。つまりそのままということです。

back　奥行き600pxで180度回転させる。背景が白色
→つまり、backはロードしてから180度回転した状態が最初の状態ということです。

ここで先ほどのbackface-visibility: hidden;が機能します。180度回転するということは背面が表示されるということです。ですがここでは非表示の設定にしているので、90度回転した瞬間にback全てが非表示になります（消える）。ですので見た目ではfrontの画像だけが見えている状態となります。180度回転するスピードも設定してあります。それはtransition: transform .6s linear;です。

まとめると、frontはページロード後もそのまま。backはページロード後、0.6秒で180度回転し非表示になる。

3　ホバー後

.card:hover > .front{
    transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
    transform: perspective(600px) rotateY(0deg);
}

最後は回転の動き方の説明です。
frontはホバーすると-180度、つまりネジむきに180度回転しbackface-visibility: hidden;によって非表示となります。
backは180度の状態（ロード後の状態）から0度まで回転して表面が表示されます。
この２つの動きが同時に起こることで、カードが回転しているように見えるわけです。

（.card:hover > .frontはcardがホバーしたときのcard直下の.frontという指定です。）

まとめ

いかがでしたでしょうか？

ポイントは初めからbackを180度回転させていて、backface-visibility: hidden;で自動で非表示にしていたところです。ここではbackface-visibility: hidden;とtransform: perspective(600px) rotateY(0deg);を覚えておきましょう！

今回は回転ということで、一見複雑に思えますが、１つ１つ分解してみてみるときっと納得できると思います。カードをひっくり返す動きはたまに見るデザインなので、コーディングできると役立つ時がくると思いますよ！

それでは皆さんの良きコーディングライフを！