手寫一個使用css3旋轉硬幣的效果

王铁柱6發表於2024-11-28
CSSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 旋轉硬幣</title>
<style>
body {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.coin {
  width: 100px;
  height: 100px;
  position: relative;
  perspective: 800px;
  margin: 50px auto;
}

.coin-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

.coin-front, .coin-back {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  backface-visibility: hidden; /* 關鍵屬性，防止背面在旋轉過程中可見 */
}

.coin-front {
  background-color: #ffd700; /* 金色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #333;
}


.coin-back {
  background-color: #c0c0c0; /* 銀色 */
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #333;
}

.coin:hover .coin-inner {
  transform: rotateY(180deg); /* 滑鼠懸停時旋轉180度 */
}


</style>
</head>
<body>

<div class="coin">
  <div class="coin-inner">
    <div class="coin-front">正面</div>
    <div class="coin-back">反面</div>
  </div>
</div>

</body>
</html>

程式碼解釋:

  • HTML 結構: 一個 coin div 作為容器，內部包含 coin-inner，coin-inner 再包含 coin-front 和 coin-back 兩個面。
  • CSS 樣式:
    • perspective: 設定透視效果，值越大，透視效果越弱。
    • transform-style: preserve-3d;: 使子元素在3D空間中呈現。
    • backface-visibility: hidden;: 這是關鍵屬性，它隱藏了背面，防止在旋轉過程中看到背面。
    • transform: rotateY(180deg);: 旋轉180度，用於初始化背面。
    • transition: transform 1s ease-in-out;: 設定旋轉動畫，1秒鐘，ease-in-out緩動效果。
    • :hover: 滑鼠懸停時觸發旋轉動畫。

如何使用:

  1. 將程式碼儲存為 HTML 檔案 (例如 coin.html)。
  2. 使用瀏覽器開啟該檔案。
  3. 滑鼠懸停在硬幣上，即可看到硬幣翻轉的效果。

進階用法:

  • 自定義旋轉角度: 可以修改 rotateY 的值來控制旋轉角度，例如 rotateY(360deg) 旋轉一圈。
  • 新增點選事件: 可以使用 JavaScript 新增點選事件，實現點選翻轉硬幣的效果。
  • 更真實的硬幣效果: 可以使用圖片代替背景顏色，並新增陰影等效果，使硬幣看起來更真實。

希望這個例子對您有所幫助！

相關文章