CSS 轉(zhuǎn)換：解決設(shè)計(jì)難題的強(qiáng)大工具

本文將探討 CSS 轉(zhuǎn)換在實(shí)際應(yīng)用中的強(qiáng)大功能，展示其如何高效解決各種設(shè)計(jì)挑戰(zhàn)，並創(chuàng)造引人注目的視覺(jué)效果。我們將學(xué)習(xí)如何垂直對(duì)齊元素、創(chuàng)建美觀的箭頭、構(gòu)建加載動(dòng)畫(huà)以及實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)等。

CSS3 轉(zhuǎn)換於 2012 年成為標(biāo)準(zhǔn)，在此之前部分瀏覽器已提供支持。轉(zhuǎn)換允許您輕鬆變換網(wǎng)頁(yè)元素，例如旋轉(zhuǎn)、縮放或傾斜元素，只需一行代碼即可實(shí)現(xiàn)，這在以前是難以實(shí)現(xiàn)的。 CSS 轉(zhuǎn)換支持 2D 和 3D 變換。

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

本文不會(huì)講解轉(zhuǎn)換的基礎(chǔ)知識(shí)。如果您對(duì)轉(zhuǎn)換不太熟悉，建議您先閱讀關(guān)於 2D 和 3D 轉(zhuǎn)換的入門(mén)資料。

垂直對(duì)齊子元素

垂直對(duì)齊元素一直是網(wǎng)頁(yè)設(shè)計(jì)師的難題。雖然看起來(lái)簡(jiǎn)單，但實(shí)際上存在多種繁瑣的技術(shù)。一些方法建議使用 display: inline 和 vertical-align: middle，另一些則建議使用 display: table 及其相關(guān)的樣式。當(dāng)然，F(xiàn)lexbox 或 Grid 也能解決這個(gè)問(wèn)題，但對(duì)於較小的組件，轉(zhuǎn)換可能是一個(gè)更簡(jiǎn)單的選擇。

當(dāng)元素高度可變時(shí)，垂直對(duì)齊會(huì)更加複雜。 CSS 轉(zhuǎn)換提供了一種解決此問(wèn)題的有效方法。以下是一個(gè)簡(jiǎn)單的示例，包含兩個(gè)嵌套的 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>

我們?yōu)楦冈卦O(shè)置寬度、高度和邊框，並添加一些間距使其更美觀：

.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%);
}

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

創(chuàng)建箭頭

另一個(gè)有趣的用例是創(chuàng)建可縮放的對(duì)話(huà)框箭頭。您可以使用圖形編輯器創(chuàng)建箭頭，但這比較繁瑣，而且位圖圖像可能無(wú)法很好地縮放。

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

<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 偽元素創(chuàng)建箭頭，並使用旋轉(zhuǎn)變換將其轉(zhuǎn)換為箭頭形狀：

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

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

創(chuàng)建“跳躍球”加載動(dòng)畫(huà)

為了指示加載過(guò)程，可以使用 CSS 動(dòng)畫(huà)和轉(zhuǎn)換創(chuàng)建一個(gè)跳躍球加載動(dòng)畫(huà)：

<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 創(chuàng)建“旋轉(zhuǎn)器”加載動(dòng)畫(huà) (此部分內(nèi)容與原文類(lèi)似，為了避免重複，此處省略詳細(xì)代碼，僅保留概述)

可以使用 SVG 創(chuàng)建更複雜的加載動(dòng)畫(huà)，例如旋轉(zhuǎn)器。通過(guò)組合使用 SVG 元素、CSS 動(dòng)畫(huà)和轉(zhuǎn)換，可以創(chuàng)建具有視覺(jué)吸引力的加載效果。

創(chuàng)建翻轉(zhuǎn)動(dòng)畫(huà)

最後，我們來(lái)看一個(gè)帶有翻轉(zhuǎn)動(dòng)畫(huà)的圖片示例。當(dāng)您將鼠標(biāo)懸停在圖片上時(shí)，它會(huì)翻轉(zhuǎn)並顯示其描述。這對(duì)於類(lèi)似 Instagram 的網(wǎng)站非常有用。 (此部分內(nèi)容與原文類(lèi)似，為了避免重複，此處省略詳細(xì)代碼，僅保留概述)

通過(guò)使用 3D 轉(zhuǎn)換和 transform-style: preserve-3d;，以及 transition 屬性，可以實(shí)現(xiàn)平滑的翻轉(zhuǎn)動(dòng)畫(huà)效果。

注意事項(xiàng)

雖然 CSS 轉(zhuǎn)換和動(dòng)畫(huà)功能強(qiáng)大，但應(yīng)謹(jǐn)慎使用，避免過(guò)度使用導(dǎo)致用戶(hù)體驗(yàn)不佳。

總結(jié)

本文展示了 CSS 轉(zhuǎn)換結(jié)合其他技術(shù)如何解決各種設(shè)計(jì)任務(wù)。我們學(xué)習(xí)瞭如何垂直對(duì)齊元素、創(chuàng)建可縮放的箭頭、跳躍和旋轉(zhuǎn)加載動(dòng)畫(huà)以及實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)。 記住，CSS 應(yīng)該用於提升用戶(hù)體驗(yàn)，而不是僅僅炫技。

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

以上是在現(xiàn)實(shí)世界中使用CSS轉(zhuǎn)換的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！