如何僅使用CSS實現3D卡片翻轉效果？

如何使用CSS 翻轉3D 卡片

任務是僅使用CSS 創建3D 翻轉卡片翻轉效果，其中卡片翻轉

純CSS 翻轉效果

為了簡化實現，我們將使用以下CSS 代碼：

<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>

說明

說明

• 卡片容器應用了透視，賦予其3D 空間的錯覺。正面和背面都絕對位於容器內。它們也會被變換以隱藏背面並保留其 3D 特性。
• 當滑鼠停留在卡片上時，會發生以下變換：

正面旋轉 180 度Y 軸，露出背面。

背面繞 Y 軸旋轉 360 度，完成翻轉。 這種僅 CSS 技術可以實現平滑且逼真的效果懸停時的 3D 卡片翻轉效果。

以上是如何僅使用CSS實現3D卡片翻轉效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！