一、心路歷程
最近寫駕駛艙的時候琢磨了一個問題，就是單純的使背景圖片旋轉(zhuǎn)的一定的角度。
只通過CSS3的transfrom讓整個容器都翻轉(zhuǎn)了一定的角度，達不到我想要的效果。
然后通過研究和參考相關(guān)文章總算實現(xiàn)了這個效果，話不多說，上代碼。
二、代碼實現(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
如果思路走的對，那么實現(xiàn)起來就會非常簡單。
雖然最后沒有用上這個，但還是覺得特別有用，所以跟大家分析一下。
參考文獻
到此這篇關(guān)于CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)CSS3 背景圖片旋轉(zhuǎn)180度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
