首頁 > web前端 > css教學 > 主體

css如何實現平移變換

WBOY
發布: 2021-12-08 10:20:52
原創
4513 人瀏覽過

css中,可利用transform屬性實作元素的平移變換,該屬性可對元素進行移動操作,當屬性的值為「translate(x,y)」時,可對元素進行平移操作,語法「元素{transform:translate(橫向移動值,垂直移動值);}」。

css如何實現平移變換

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼實作平移變換

在css中,可以利用transform屬性來設定元素的平移變換,該屬性的作用就是向元素應用2D 或3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

當屬性值設定為translate(x,y)時,可以對元素進行平移操作,範例如下:




    
    
    
    Document
    

登入後複製

輸出結果:

css如何實現平移變換

當「transform:translate(100px,200px);」樣式加入元素時,輸出結果如下:

css如何實現平移變換

(學習影片分享:css影片教學

以上是css如何實現平移變換的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!