要使用CSS制作翻轉(zhuǎn)卡片效果，關(guān)鍵在于利用3D轉(zhuǎn)換和層疊控制。具體步驟如下：1. 構(gòu)建HTML結(jié)構(gòu)，設(shè)置外層容器card-container及內(nèi)部front和back兩個(gè)面；2. 設(shè)置樣式，通過(guò)perspective開(kāi)啟3D空間，用transform-style: preserve-3d保持子元素3D效果，并通過(guò)backface-visibility: hidden隱藏背面內(nèi)容；3. 通過(guò):hover偽類(lèi)或JavaScript觸發(fā)rotateY變換實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)；4. 調(diào)整卡片尺寸、陰影等細(xì)節(jié)增強(qiáng)視覺(jué)效果和交互體驗(yàn)。

想用 CSS 做一個(gè)翻轉(zhuǎn)卡片效果？其實(shí)不難，關(guān)鍵在于理解如何利用 CSS 的 3D 轉(zhuǎn)換和層疊來(lái)實(shí)現(xiàn)視覺(jué)上的“翻面”效果。核心思路是讓前后兩個(gè)面共享同一個(gè)空間，通過(guò)旋轉(zhuǎn)容器來(lái)切換顯示哪一面。

下面分幾個(gè)步驟來(lái)實(shí)現(xiàn)這個(gè)效果：

基本結(jié)構(gòu)：HTML 結(jié)構(gòu)要清晰

你需要一個(gè)外層容器（container），里面包含兩個(gè)部分：正面（front）和背面（back）。結(jié)構(gòu)大致如下：

<div class="card-container">
  <div class="card">
    <div class="front">正面內(nèi)容</div>
    <div class="back">背面內(nèi)容</div>
  </div>
</div>

這樣做的好處是方便統(tǒng)一控制翻轉(zhuǎn)動(dòng)畫(huà)，并且 front 和 back 可以各自獨(dú)立設(shè)置樣式。

樣式準(zhǔn)備：開(kāi)啟 3D 空間和隱藏背面

為了讓卡片能翻轉(zhuǎn)起來(lái)，需要開(kāi)啟 3D 渲染上下文。同時(shí)，默認(rèn)狀態(tài)下只顯示正面，背面要隱藏起來(lái)。

.card-container {
  perspective: 1000px; /* 開(kāi)啟 3D 效果 */
}

.card {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d; /* 保持子元素的 3D 空間 */
  transition: transform 0.6s; /* 添加動(dòng)畫(huà)過(guò)渡 */
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隱藏背面 */
}

.back {
  transform: rotateY(180deg); /* 初始狀態(tài)背面朝后 */
}

這段代碼的關(guān)鍵點(diǎn)有三個(gè)：

• perspective 控制視角距離
• transform-style: preserve-3d 讓變換保持在三維空間內(nèi)
• backface-visibility: hidden 保證翻轉(zhuǎn)時(shí)看不到另一面的反向內(nèi)容

實(shí)現(xiàn)翻轉(zhuǎn)：觸發(fā)旋轉(zhuǎn)動(dòng)作

你可以通過(guò)懸停、點(diǎn)擊或者 JavaScript 來(lái)觸發(fā)翻轉(zhuǎn)。最常見(jiàn)的是使用 :hover 模擬交互行為：

.card-container:hover .card {
  transform: rotateY(180deg); /* 水平翻轉(zhuǎn) */
}

這樣鼠標(biāo)移上去的時(shí)候，卡片就會(huì)翻過(guò)去，展示背面內(nèi)容。如果你想支持點(diǎn)擊翻轉(zhuǎn)，可以用 JavaScript 動(dòng)態(tài)切換類(lèi)名或直接修改 transform 屬性。

小技巧：調(diào)整細(xì)節(jié)更自然

• 卡片尺寸要明確：如果不設(shè)定寬高，布局可能會(huì)出錯(cuò)。
• z-index 不太適用：因?yàn)橛昧?3D 變換，層級(jí)控制主要靠變換順序而不是 z-index。
• 可以加陰影增強(qiáng)立體感：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

基本上就這些。只要 HTML 結(jié)構(gòu)清晰，CSS 設(shè)置正確，就能輕松做出一個(gè)看起來(lái)很酷的翻轉(zhuǎn)卡片效果。雖然過(guò)程有點(diǎn)細(xì)節(jié)要注意，但掌握了原理之后，改造成垂直翻轉(zhuǎn)或者其他動(dòng)畫(huà)也很容易。

以上がCSSでフリップカード効果を作成する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。