最近寫駕駛艙的時候琢磨了一個問題，就是單純的使背景圖片旋轉(zhuǎn)的一定的角度。
只通過CSS3的transfrom讓整個容器都翻轉(zhuǎn)了一定的角度，達不到我想要的效果。
然后通過研究和參考相關文章總算實現(xiàn)了這個效果，話不多說，上代碼。
HTML模板如下
<div class="smart_development_right">
<div class="smart_development_content">
<span>智能感知設備</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
如果思路走的對，那么實現(xiàn)起來就會非常簡單。
雖然最后沒有用上這個，但還是覺得特別有用，所以跟大家分析一下。
參考文獻
到此這篇關于CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例的文章就介紹到這了,更多相關CSS3 背景圖片旋轉(zhuǎn)180度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
標簽：赤峰 保定 延邊 泰州 萍鄉(xiāng) 大同 林芝
巨人網(wǎng)絡通訊聲明：本文標題《CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例》，本文關鍵詞 ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權(quán)與本站無關。
| ? |
|
|
|
|||||||||||||||
| 全國咨詢熱線 | |||||||||||||||||
| 400-1100-266 | |||||||||||||||||
| 在線客服( QQ：340506921 ) | |||||||||||||||||
 |
|||||||||||||||||
