」;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度即可。">

首頁  >  文章  >  web前端  >  css怎麼實現反轉180

css怎麼實現反轉180

藏色散人
藏色散人原創
2023-01-30 10:35:443143瀏覽

css實作反轉180的方法:1、建立一個HTML範例檔;2、定義div為「1442f477d3faccdaf4c3af1d7639eeac」;3、透過「background: url('/ public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);」屬性實現旋轉180度即可。

css怎麼實現反轉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(&#39;/public/smart_equipment.png&#39;) 0 0 no-repeat;
    transform: rotate(180deg);
}

如果思路走的對,那麼實作起來就會非常簡單。

推薦學習:《css影片教學

以上是css怎麼實現反轉180的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:css是腳本嗎下一篇:css是腳本嗎