国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

kk_miles / 2769人閱讀

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

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

#myelement {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

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

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

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

僅僅變換背景

這個元素可以使用任何樣式，但一定要設(shè)置 position 屬性，因?yàn)槠鋫晤愒貢谒鼇矶ㄎ弧Ｈ绻幌氡尘皳蔚皆赝猓蔷鸵O(shè)置 overflow: hidden。

#myelement {

position: relative;

overflow: hidden;

}

現(xiàn)在我們可以創(chuàng)建一個絕對定位的偽類元素來實(shí)現(xiàn)變換背景。為了確保他會低于元素內(nèi)容顯示，需要設(shè)置 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);

}

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

在變換的元素上實(shí)現(xiàn)固定背景

所有主元素的變換操作都會影響到偽類元素. 假如偽類元素不想要變換操作時，我們就需要撤銷這個變換， 例子：當(dāng)一個父元素旋轉(zhuǎn)了 30 度，那么偽類元素需要相反方向旋轉(zhuǎn) 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);

}

再次強(qiáng)調(diào)，你需要對偽類元素的寬高及定位屬性進(jìn)行調(diào)整來確保它可以完全覆蓋主元素。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116396.html

相關(guān)文章

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

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

    Mike617 評論0 收藏0

  • CSS3新特性的概述

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

    Zachary 評論0 收藏0

  • 所有用CSS3寫的3D特效，都離不開這些知識

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

    Arno 評論0 收藏0

  • CSS 3D Panorama（全景） - 淘寶造物節(jié)技術(shù)剖析

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

    LiuRhoRamen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<