如何使用純 CSS 實現平滑的 3D 卡翻轉：解決對齊問題

使用純CSS 翻轉3D 卡

問題：

嘗試使用CSS 建立3D 卡片懸停時會卡住，而不是平滑翻轉。

嘗試的程式碼：

<code class="css">.card-container {
  // CSS code...
}</code>

解決方案：

要僅使用CSS 實現完美的3D 卡片翻轉動畫，請簡化程式碼並繞著Y 軸旋轉卡片。這是一個優化示例：

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>

HTML:

<code class="html"><div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div></code>

如何實作作品：

• 變換風格：preserve-3d；屬性確保卡片的元素保留在3D 空間。
• 背面可見性：隱藏；翻轉時隱藏卡片的背面。
• rotateY() 屬性繞 Y 軸翻轉卡片，建立翻轉效果。
• transition: 變換 1s;在翻轉動畫過程中引入平滑過渡。

結果：

此程式碼片段使用純 CSS 提供無縫 3D 卡翻轉動畫。懸停時，卡片會從正面平滑旋轉到背面。

以上是如何使用純 CSS 實現平滑的 3D 卡翻轉：解決對齊問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！