如何僅使用 CSS 在懸停時旋轉 3D CSS 卡？-css教學-PHP中文網

如何僅使用 CSS 在懸停時旋轉 3D CSS 卡？

Mary-Kate Olsen

發布： 2024-10-23 19:07:30

原創

593 人瀏覽過

How to Rotate a 3D CSS Card on Hover Using Only CSS?

懸停時的CSS 可翻轉3D 卡片效果

在本教程中，我們的目標是僅使用CSS 實現3D 卡片翻轉效果。將滑鼠懸停在卡片上時，卡片會從正面平滑地旋轉到背面。

程式碼實作：

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

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

.card:hover .back {
  transform: rotateY(360deg);
}</code>

登入後複製

說明：

我們先定義一個具有所需高度、寬度和視角的容器類別.card。
在 .card 容器內，我們建立兩個子元素：.front 和 .back來表示卡片的正面和背面。
我們將 .front 和 .back 絕對定位在 .card 容器內，並將它們的尺寸設為 100% 寬度和高度。
我們應用過渡到兩個元素的變換屬性，以在懸停時實現平滑旋轉。
為了防止翻轉動畫期間閃爍，我們將 backface-visibility 設定為隱藏，將變換樣式設為 keep-3d。
最初，使用變換：rotateY(180deg);將背面沿著Y軸旋轉180度。
懸停時，我們將正面旋轉180度，背面旋轉360度以完成翻轉。

以上是如何僅使用 CSS 在懸停時旋轉 3D CSS 卡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！