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

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

Web デザインと開発では、クールな効果によってユーザー エクスペリエンスが向上し、Web サイトがより魅力的になります。一般的なクールなエフェクトは、3D カードをめくることです。この記事では、HTML、CSS、jQuery を使用してクールな 3D フリップ カード効果を作成する方法を紹介し、具体的なコード例を示します。

まず、フリップ カードのコンテンツを保持する HTML 構造が必要です。単純な HTML ページを作成し、必要な CSS および JavaScript リンクを追加してみましょう。コードは次のとおりです。

    
    
    
    



    

        

            

                
正面
            
            

                
背面
            
        
    

上記のコードは、フロント パネルとバック パネルの 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 サイトの他の関連記事を参照してください。