HTML、CSS、jQuery: クールな 3D フリップカードを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: クールな 3D フリップカードを作成する

PHPz

リリース： 2023-10-24 12:57:40

オリジナル

1556 人が閲覧しました

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 サイトの他の関連記事を参照してください。

HTML、CSS、jQuery: クールな 3D フリップ カードを作成する

HTML、CSS、jQuery: クールな 3D フリップカードを作成する