回転するカードの CSS チュートリアル | インタラクティブ UI デザイン

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 91%です。学習者から 100% の好評価を得ています。

回転するカード

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

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

カードのbackface-visibilityをnoneに設定して、デフォルトで裏面が表示されないようにします。
最初は、カードの裏面にrotateY(-180deg)を設定し、表にrotateY(0deg)を設定します。
マウスオーバー時に、表にrotateY(180deg)を設定し、裏にrotateY(0deg)を設定します。
回転効果を作成するために適切な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 でさらに実験を行って練習してください。