CSS を使って回転するカードを作成する

はじめに

この実験では、CSSを使って回転するカードを作成する概念を探ります。この実験の目的は、情報や画像を表示するために使用できるインタラクティブで魅力的なUI要素を作成する方法を教えることです。この実験が終わるとき、CSSを使って動的で視覚的に魅力的なウェブコンテンツを作成する方法をしっかりと理解しているでしょう。

回転するカード

VM内には既にindex.htmlとstyle.cssが用意されています。

マウスオーバー時に回転する両面カードを作成するには、次の手順に従ってください。

1. カードのbackface-visibilityをnoneに設定して、デフォルトで裏面が表示されないようにします。
2. 最初は、カードの裏面にrotateY(-180deg)を設定し、表にrotateY(0deg)を設定します。
3. マウスオーバー時に、表にrotateY(180deg)を設定し、裏にrotateY(0deg)を設定します。
4. 回転効果を作成するために適切なperspective値を設定します。

以下は、HTMLとCSSのコードの例です。

<div class="card">
  <div class="card-side front">
    <div>表</div>
  </div>
  <div class="card-side back">
    <div>裏</div>
  </div>
</div>

.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding: 2rem;
  color: white;
}

.card-side.back {
  transform: rotateY(-180deg);
  background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
}

.card-side.front {
  background: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.card:hover.card-side.front {
  transform: rotateY(180deg);
}

.card:hover.card-side.back {
  transform: rotateY(0deg);
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！回転するカードの実験を完了しました。技術力を向上させるために、LabExでさらに実験を行って練習してください。