css怎麼實現反轉180

css實作反轉180的方法：1、建立一個HTML範例檔；2、定義div為「

」；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中文網其他相關文章！