在現實世界中使用CSS轉換

CSS 轉換：解決設計難題的強大工具

本文將探討 CSS 轉換在實際應用中的強大功能，展示其如何高效解決各種設計挑戰，並創造引人注目的視覺效果。我們將學習如何垂直對齊元素、創建美觀的箭頭、構建加載動畫以及實現翻轉動畫等。

CSS3 轉換於 2012 年成為標準，在此之前部分瀏覽器已提供支持。轉換允許您輕鬆變換網頁元素，例如旋轉、縮放或傾斜元素，只需一行代碼即可實現，這在以前是難以實現的。 CSS 轉換支持 2D 和 3D 變換。

瀏覽器兼容性方面，所有主流瀏覽器都支持 2D 轉換，包括 Internet Explorer 9 及更高版本。而 3D 轉換在 IE10 及更高版本中僅部分支持。

本文不會講解轉換的基礎知識。如果您對轉換不太熟悉，建議您先閱讀關於 2D 和 3D 轉換的入門資料。

垂直對齊子元素

垂直對齊元素一直是網頁設計師的難題。雖然看起來簡單，但實際上存在多種繁瑣的技術。一些方法建議使用 display: inline 和 vertical-align: middle，另一些則建議使用 display: table 及其相關的樣式。當然，Flexbox 或 Grid 也能解決這個問題，但對於較小的組件，轉換可能是一個更簡單的選擇。

當元素高度可變時，垂直對齊會更加複雜。 CSS 轉換提供了一種解決此問題的有效方法。以下是一個簡單的示例，包含兩個嵌套的 div：

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

我們為父元素設置寬度、高度和邊框，並添加一些間距使其更美觀：

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

然後，使用 transform: translateY(-50%); 將文本垂直居中：

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

為了避免模糊，可以添加 perspective(1px):

.child {
  transform: perspective(1px) translateY(-50%);
}

這樣，即使文本長度不同，子元素也能完美垂直居中。

創建箭頭

另一個有趣的用例是創建可縮放的對話框箭頭。您可以使用圖形編輯器創建箭頭，但這比較繁瑣，而且位圖圖像可能無法很好地縮放。

純 CSS 解決方案更有效。假設我們有一個文本框：

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

使用 ::before 偽元素創建箭頭，並使用旋轉變換將其轉換為箭頭形狀：

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

這樣，即使更改頁面字體大小，箭頭也能保持比例。

創建“跳躍球”加載動畫

為了指示加載過程，可以使用 CSS 動畫和轉換創建一個跳躍球加載動畫：

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

使用 SVG 創建“旋轉器”加載動畫 (此部分內容與原文類似，為了避免重複，此處省略詳細代碼，僅保留概述)

可以使用 SVG 創建更複雜的加載動畫，例如旋轉器。通過組合使用 SVG 元素、CSS 動畫和轉換，可以創建具有視覺吸引力的加載效果。

創建翻轉動畫

最後，我們來看一個帶有翻轉動畫的圖片示例。當您將鼠標懸停在圖片上時，它會翻轉並顯示其描述。這對於類似 Instagram 的網站非常有用。 (此部分內容與原文類似，為了避免重複，此處省略詳細代碼，僅保留概述)

通過使用 3D 轉換和 transform-style: preserve-3d;，以及 transition 屬性，可以實現平滑的翻轉動畫效果。

注意事項

雖然 CSS 轉換和動畫功能強大，但應謹慎使用，避免過度使用導致用戶體驗不佳。

總結

本文展示了 CSS 轉換結合其他技術如何解決各種設計任務。我們學習瞭如何垂直對齊元素、創建可縮放的箭頭、跳躍和旋轉加載動畫以及實現翻轉動畫。 記住，CSS 應該用於提升用戶體驗，而不是僅僅炫技。

(原文中“Frequently Asked Questions about CSS Transforms”部分內容與本文內容高度重合，故此處省略)

以上是在現實世界中使用CSS轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！