使用css3做一個魔方旋轉的效果

王铁柱6發表於2024-11-28
CSSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 魔方旋轉</title>
<style>
body {
  background-color: #f0f0f0;
  perspective: 800px; /* 為父元素新增透視效果 */
}

.cube-container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  transform-style: preserve-3d; /* 使子元素保留3D變換 */
  animation: rotate 10s linear infinite; /* 新增旋轉動畫 */
}

.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 128, 255, 0.7); /* 設定半透明藍色 */
  border: 1px solid black;
  box-sizing: border-box; /* 將邊框包含在元素寬度內 */
  text-align: center;
  line-height: 200px;
  font-size: 2em;
  color: white;
}

/* 定義每個面的位置 */
.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* 定義旋轉動畫 */
@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube-face front">Front</div>
  <div class="cube-face back">Back</div>
  <div class="cube-face right">Right</div>
  <div class="cube-face left">Left</div>
  <div class="cube-face top">Top</div>
  <div class="cube-face bottom">Bottom</div>
</div>

</body>
</html>

程式碼解釋:

  • perspective: 800px;: 為 body 元素設定透視效果，數值越大，透視效果越弱，看起來越扁平。
  • transform-style: preserve-3d;: 關鍵屬性，使子元素在3D空間中呈現。
  • translateZ(100px);: 將每個面沿著Z軸平移100px，使其位於正確的位置，100px是邊長的一半。
  • rotateX(), rotateY(): 分別繞X軸和Y軸旋轉。
  • @keyframes rotate: 定義旋轉動畫，使魔方繞X軸和Y軸無限旋轉。

改進方向:

  • 更復雜的旋轉: 可以透過修改 @keyframes 來實現更復雜的旋轉動畫，例如只繞一個軸旋轉，或者按特定順序旋轉。
  • 互動性: 可以使用 JavaScript 新增互動性，例如透過滑鼠拖拽來控制魔方的旋轉。
  • 更逼真的效果: 可以使用更復雜的 CSS 樣式和動畫來實現更逼真的魔方效果，例如新增陰影、高光等。
  • 使用 3D transform library: 可以使用一些現成的 3D transform 庫，例如 Three.js，來更方便地建立和操作 3D 物件。

這個例子提供了一個基本的 CSS3 魔方旋轉效果，你可以根據自己的需求進行修改和擴充套件。 希望這個例子對您有所幫助!

相關文章