如何使用 css3 transform 屬性來變換背景圖

Mike617 發布于2019-08-02 16:16 / 2792人閱讀

摘要：使用屬性可以輕易的旋轉，傾斜，縮放任何元素。然而，這個屬性旋轉了整個元素，包括他的內容邊框背景圖。再次強調，你需要對偽類元素的寬高及定位屬性進行調整來確保它可以完全覆蓋主元素。查看上寫的使用屬性來變換背景圖像。

使用 css3 transform 屬性可以輕易的旋轉，傾斜，縮放任何元素。目前即使沒有任何前綴也可以在絕大部分瀏覽器上很好的使用。

#myelement {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

這個聽起來很贊。然而，這個屬性旋轉了整個元素，包括他的內容、邊框、背景圖。如果你只是想旋轉它的背景圖而不選旋轉內容的話，應該怎么做呢？或者你只想旋轉內容，而不旋轉背景圖，這個又該怎么做呢？

目前 W3C 沒有關于如何旋轉背景圖的提案。我覺得這個是非常常見的使用場景，我深信最終也會出來相相關提案，但這對當前就想要實現這個效果的開發者沒有什么意義。

幸運的是，我們找到一個解決方式。這個方式本質上，是將背景圖應用到某個元素的 before 或者 after 這種偽類元素上而不是應用到元素本身。然后在偽類元素獨立的使用 transform 屬性。

僅僅變換背景

這個元素可以使用任何樣式，但一定要設置 position 屬性，因為其偽類元素會基于它來定位。如果不想背景撐到元素外，那就要設置 overflow: hidden。

#myelement {

position: relative;

overflow: hidden;

}

現在我們可以創建一個絕對定位的偽類元素來實現變換背景。為了確保他會低于元素內容顯示，需要設置 z-index: -1。

#myelement:before {

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(background.png) 0 0 repeat;

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

需要注意的是，在變換的過程中，你需要去調整偽類元素的 width，height，position 屬性。例子：假如偽類元素使用了一張可重復的圖片做背景，那么旋轉區域就必須大于父元素，這樣才可以在旋轉過程中覆蓋整個父元素。

在變換的元素上實現固定背景

所有主元素的變換操作都會影響到偽類元素. 假如偽類元素不想要變換操作時，我們就需要撤銷這個變換，例子：當一個父元素旋轉了 30 度，那么偽類元素需要相反方向旋轉 30 度，來使偽類元素回退到固定位置。

#myelement {

position: relative;

overflow: hidden;

-webkit-transform: rotate(30deg);

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;

-webkit-transform: rotate(-30deg);

transform: rotate(-30deg);

}

再次強調，你需要對偽類元素的寬高及定位屬性進行調整來確保它可以完全覆蓋主元素。

查看CodePen 上寫的DEMO：使用css3屬性來變換背景圖像。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54979.html

如何使用 css3 transform 屬性來變換背景圖

摘要：使用屬性可以輕易的旋轉，傾斜，縮放任何元素。然而，這個屬性旋轉了整個元素，包括他的內容邊框背景圖。再次強調，你需要對偽類元素的寬高及定位屬性進行調整來確保它可以完全覆蓋主元素。查看上寫的使用屬性來變換背景圖像。使用 css3 transform 屬性可以輕易的旋轉，傾斜，縮放任何元素。目前即使沒有任何前綴也可以在絕大部分瀏覽器上很好的使用。 #myelement { -webkit...

kk_miles 2019-08-30 15:48 評論0 收藏0
CSS3新特性的概述

摘要：的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過渡變換動畫下面分別說一說以上六類都有哪些內容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設置樣式為屬性的元素設置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過渡 5.CSS3變換 ...

Zachary 2019-08-29 13:17 評論0 收藏0
所有用CSS3寫的3D特效，都離不開這些知識

摘要：之前張鑫旭博客寫的效果講解得不錯啊，既然是大神，應該能搜出點什么，結果一搜，還真有。參考感謝張鑫旭這篇文章好吧，變換，不過如此還有一篇寫得不錯的，幫助理解和屬性最后引用張鑫旭的一句話純粹從網上些效果代碼，那永遠就是的命咯起因昨晚在做慕課網的十天精通CSS3課程，其中的綜合練習是要做一個3D導航翻轉的效果。非常高大上。以往這些效果我都很不屑，覺得網上一大堆這些特效的代碼，復制粘貼就...

Arno 2019-08-01 17:16 評論0 收藏0
CSS 3D Panorama（全景） - 淘寶造物節技術剖析

摘要：淘寶造物節的活動頁就是全景的一個很贊的頁面，它將全景圖分割成等份，相鄰的元素構成的夾角，相鄰兩側面相對于棱柱中心所構成的夾角。本文轉自凹凸實驗室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...

LiuRhoRamen 2019-08-29 11:16 評論0 收藏0