在這篇文章中，我們將了解如何使用 HTML 和 CSS 以及漸變背景創建時尚的 3D 翻轉卡片動畫。

造訪我的網站

了解結構

我們將使用卡片的兩側（正面和背面）來創造翻轉效果。此效果將在懸停時使用 CSS 過渡啟動。

    

      
Front Side
    
    

      
Back Side
    

這個簡單的 HTML 結構包含一個具有兩側的 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()設定為-180deg，正面設定為0deg。

透視：透過讓卡片看起來像是在空間中翻轉來增加 3D 效果的深度。

懸停時，將前側旋轉 Y() 設定為 180 度，後側設定為 0 度。

結論

只需幾行 HTML 和 CSS，您就可以創建令人驚嘆的 3D 翻轉卡片動畫，為您的網站增添動態感。嘗試嘗試顏色和效果，使其獨一無二