はじめに
この実験では、CSSを使って回転するカードを作成する概念を探ります。この実験の目的は、情報や画像を表示するために使用できるインタラクティブで魅力的なUI要素を作成する方法を教えることです。この実験が終わるとき、CSSを使って動的で視覚的に魅力的なウェブコンテンツを作成する方法をしっかりと理解しているでしょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSSを使って回転するカードを作成する概念を探ります。この実験の目的は、情報や画像を表示するために使用できるインタラクティブで魅力的なUI要素を作成する方法を教えることです。この実験が終わるとき、CSSを使って動的で視覚的に魅力的なウェブコンテンツを作成する方法をしっかりと理解しているでしょう。
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でさらに実験を行って練習してください。