一、心路歷程

最近寫駕駛艙的時(shí)候琢磨了一個(gè)問題，就是單純的使背景圖片旋轉(zhuǎn)的一定的角度。

只通過CSS3的transfrom讓整個(gè)容器都翻轉(zhuǎn)了一定的角度，達(dá)不到我想要的效果。

然后通過研究和參考相關(guān)文章總算實(shí)現(xiàn)了這個(gè)效果，話不多說(shuō)，上代碼。

二、代碼實(shí)現(xiàn)

HTML模板如下

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>智能感知設(shè)備</span>
  </div>
  <div class="smart_development_content">
    <span>在線率</span>
  </div>
</div>

CSS代碼

.smart_development_right{
   position: relative;
   overflow: hidden; 
}
.wisdomGongdi .gongdi_center .center_top .smart_development_right::before {
  content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: url('/public/smart_equipment.png') 0 0 no-repeat;
    transform: rotate(180deg);
} 

如果希望向右旋轉(zhuǎn)90度 就把上面代碼中的180deg改成90deg

如果希望向左旋轉(zhuǎn)90度 就把上面代碼中的180deg改成-90deg

如果思路走的對(duì)，那么實(shí)現(xiàn)起來(lái)就會(huì)非常簡(jiǎn)單。

雖然最后沒有用上這個(gè)，但還是覺得特別有用，所以跟大家分析一下。

參考文獻(xiàn)

到此這篇關(guān)于CSS3只讓背景圖片旋轉(zhuǎn)180度的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)CSS3 背景圖片旋轉(zhuǎn)180度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！