如何使用變換|在CSS3中旋轉背景圖像| sitepoint' data-gatsby-head =” true”/> Joseph Gordon-Levitt原創2025-02-08 08:33:09356瀏覽

>本文介紹瞭如何解決不適用於背景圖像的CSS轉換的限制。 它詳細介紹了獨立於其容器元素旋轉或以其他方式操縱背景圖像的技術。 >

密鑰概念：

1. 問題：> css 屬性（例如transform>，rotate，scale）不會直接影響背景圖像。 本文提供了解決此問題的解決方案。 skew>
>
2. 解決方案：偽元素：核心技術使用或> pseudo-elements。 通過將背景圖像應用於偽元素，您可以轉換元素，將主容器未觸及或分別轉換。 ::before> ::after變換函數：文章回顧了共同的變換函數：，
和
3. >，解釋了它們的使用和參數。 > rotate()旋轉背景圖像：matrix()> rotate3d()要旋轉背景圖像而不影響容器的內容，請使用以下方法：>
在容器旋轉期間固定背景：

如果容器本身旋轉，則需要抵消偽元素上的旋轉：

<code class="language-css">#myelement {
  position: relative;
  overflow: hidden;
}

#myelement::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url('background.png') no-repeat center;
  background-size: cover;
  transform: rotate(45deg);
}</code>

>瀏覽器的兼容性：這些技術與現代瀏覽器甚至舊版本的Internet Explorer（供應商前綴）兼容。 原始文章中包含兼容性圖表。 > >

實用應用程序：本文建議使用動態英雄部分，電子商務產品顯示和交互式投資組合網站。

>

最佳實踐和故障排除：

<code class="language-css">#myelement {
  position: relative;
  overflow: hidden;
  transform: rotate(30deg);
}

#myelement::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  transform: rotate(-30deg);
}</code>

本文以最佳性能優化，可維護的CSS，移動優化和可訪問性注意事項結束。 常見的故障排除提示解決了臨界圖像，生動動畫和消失元素等問題。 一個常見問題解答部分解決了有關CSS中旋轉背景圖像的經常詢問的問題。

此重寫的響應在解釋句子和重組部分以提高流量和可讀性時保持原始含義。 保留圖像URL。

以上是如何使用變換|在CSS3中旋轉背景圖像| sitepoint' data-gatsby-head =” true”/>