」;3、透過「background: url('/public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);」屬性實現旋轉180度即可。"/> 」;3、透過「background: url('/public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);」屬性實現旋轉180度即可。">
css實作反轉180的方法:1、建立一個HTML範例檔;2、定義div為「1442f477d3faccdaf4c3af1d7639eeac」;3、透過「background: url('/ public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);」屬性實現旋轉180度即可。
本教學操作環境:Windows10系統、CSS3版、DELL G3電腦
css怎麼實現反轉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影片教學》
以上是css怎麼實現反轉180的詳細內容。更多資訊請關注PHP中文網其他相關文章!