ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery: クールな 3D フリップ カードを作成する
HTML、CSS、jQuery: クールな 3D フリップ カードを作成する
- PHPzオリジナル
- 2023-10-24 12:57:401621ブラウズ
HTML、CSS、jQuery: クールな 3D フリップ カードを作成する
Web デザインと開発では、クールな効果によってユーザー エクスペリエンスが向上し、Web サイトがより魅力的になります。一般的なクールなエフェクトは、3D カードをめくることです。この記事では、HTML、CSS、jQuery を使用してクールな 3D フリップ カード効果を作成する方法を紹介し、具体的なコード例を示します。
まず、フリップ カードのコンテンツを保持する HTML 構造が必要です。単純な HTML ページを作成し、必要な CSS および JavaScript リンクを追加してみましょう。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>3D翻转卡片</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">
<h2>正面</h2>
</div>
<div class="card-back">
<h2>背面</h2>
</div>
</div>
</div>
</body>
</html>上記のコードは、フロント パネルとバック パネルの div 要素を含む単純なカードを作成します。 Card クラスはカード コンテナのスタイルを設定するために使用され、card-inner クラスは反転効果を実装するために使用され、card-front クラスと Card-back クラスは表と裏を区別するために使用されます。
次に、CSS スタイルをカードに追加しましょう。 style.css というファイルを作成し、次のコードをそれに追加します。
.card {
width: 200px;
height: 300px;
perspective: 1000px;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.card-front {
transform: rotateY(0deg);
background-color: #3498db;
}
.card-back {
transform: rotateY(180deg);
background-color: #e74c3c;
color: #fff;
}上記のコードは、カードの外観と反転効果をスタイル設定します。遠近感プロパティを設定することで、カードに奥行きを加えることができます。反転効果を実現するには、transform アトリビュートとtransition アトリビュートを使用します。 Card:hover .card-inner セレクターは、マウスオーバー時にカードの反転をトリガーします。
最後に、jQuery を使用してフリップ カードを初期化する必要があります。 script.js という名前のファイルを作成し、次のコードをそれに追加します。
$(document).ready(function() {
$('.card').click(function() {
$(this).find('.card-inner').toggleClass('flip');
});
});上記のコードは、jQuery の toggleClass メソッドを使用して反転クラスを追加または削除し、それによってカードの反転効果をトリガーします。ユーザーがカードをクリックすると、表と裏が切り替わります。
これで、クールな 3D フリップ カードの作成に必要なコードが完成しました。すべてのファイルを同じフォルダーに保存し、ブラウザーで HTML ファイルを開くと、シンプルなカードが表示されます。カードの上にマウスを置くかクリックすると、カードが 3D で反転して表と裏が表示されます。
この記事が、HTML、CSS、jQuery を学習してクールな 3D フリップ カードを作成するのに役立つことを願っています。スタイルをカスタマイズしたり、カードにコンテンツを追加したりして、独自の効果を作成して自由に試してみてください。
以上がHTML、CSS、jQuery: クールな 3D フリップ カードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。