亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3只讓背景圖片旋轉180度的實現(xiàn)示例

  發(fā)布時間：2021-03-09 16:31:33   作者：輕嘆年華逝，   我要評論
這篇文章主要介紹了CSS3只讓背景圖片旋轉180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、心路歷程

最近寫駕駛艙的時候琢磨了一個問題，就是單純的使背景圖片旋轉的一定的角度。

只通過CSS3的transfrom讓整個容器都翻轉了一定的角度，達不到我想要的效果。

然后通過研究和參考相關文章總算實現(xiàn)了這個效果，話不多說，上代碼。

二、代碼實現(xiàn)

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

如果思路走的對，那么實現(xiàn)起來就會非常簡單。

雖然最后沒有用上這個，但還是覺得特別有用，所以跟大家分析一下。

參考文獻

到此這篇關于CSS3只讓背景圖片旋轉180度的實現(xiàn)示例的文章就介紹到這了,更多相關CSS3 背景圖片旋轉180度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論