顛倒視界：CSS 的神奇幻象

2023-10-30 20:41:58

在 CSSBattle 的第四場挑戰中，我們踏上了顛覆視覺的旅程，創造出一個上下顛倒的圖案。

透視世界的另一面：CSSBattle 的挑戰

CSSBattle 是網頁設計的試金石，它提供了一個充滿樂趣和挑戰的平台，讓設計師和開發人員展示他們的 CSS 技能。在這次挑戰中，任務是使用 CSS 創建一個上下顛倒的圖案，並在網站上實時預覽和比較參賽作品。

踏上顛倒之旅：CSS 實作

為了踏上這趟顛倒之旅，我們需要使用 CSS 中強大的彈性佈局屬性（flex）。首先，我們定義一個包含三個正方形的容器，並將其居中排列。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #000;
}

接下來，我們使用 border 屬性來建立上下顛倒的錯覺。我們為每個正方形定義一個寬度為 0 的邊框，但為其指定一個顏色。然後，我們使用 transform 屬性將正方形沿 x 軸旋轉 180 度。

.square {
  border: 0 solid #fff;
  transform: rotateX(180deg);
}

顛倒視界：動態效果

為了讓我們的圖案更具吸引力，我們將加入動畫效果。我們使用 CSS 的 animation 屬性為正方形定義一個旋轉動畫。

@keyframes spin {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

.square {
  animation: spin 2s infinite linear;
}