この投稿では、HTML と CSS を使用して、グラデーションの背景を持つスタイリッシュな 3D フリップ カード アニメーションを作成する方法を学びます。

私のウェブサイトにアクセスしてください

構造を理解する

カードの表と裏の 2 つの面を使用して、反転効果を作成します。この効果は、CSS トランジションを使用して、ホバー時にアクティブになります。

    

      
Front Side
    
    

      
Back Side
    

この単純な HTML 構造には、前面と背面の 2 つの側面を持つ 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-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

ライブデモ

backface-visibility: カードの表面が表示されている場合は裏面のコンテンツを非表示にし、その逆も同様です。

カードの裏面のrotateY()を-180度に設定し、表面を0度に設定します。

遠近法: カードが空間内で反転しているように見えるようにすることで、3D 効果に奥行きを加えます。

ホバー時に、前面のrotateY()を180度に設定し、背面を0度に設定します。

結論

わずか数行の HTML と CSS で、Web サイトにダイナミックな雰囲気を加える見事な 3D フリップ カード アニメーションを作成できます。色や効果を試して自分だけのユニークなものを作ってみてください