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