溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“css如何實現反轉180”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css如何實現反轉180”文章吧。
css實現反轉180的方法：1、創建一個HTML示例文件；2、定義div為“<div class="smart_development_right">”；3、通過“background: url('/public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);”屬性實現旋轉180度即可。
CSS3只讓背景圖片旋轉180度
CSS3旋轉背景圖片
最近寫駕駛艙的時候琢磨了一個問題，就是單純的使背景圖片旋轉的一定的角度。
只通過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;
}
.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);
}
以上就是關于“css如何實現反轉180”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
