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

css怎麼讓圖片向左移動

藏色散人
發布: 2020-12-22 10:08:37
原創
11358 人瀏覽過

在CSS中可以透過「transform:translateX(px)」樣式來讓圖片向左移動,其中transform屬性允許我們對元素進行旋轉、縮放、移動或傾斜,將值設為「translateX( px)」即可進行平移。

css怎麼讓圖片向左移動

本教學操作環境:Windows7系統、HTML5&&CSS3版本,此方法適用於所有品牌電腦。

推薦:《css影片教學

css3 功能非常強大,幾行程式碼就可以做到非常不錯的行動效果,(不算是動態頁面) 。

css讓圖片向左移動

頁面架構是必不可少的,這裡是嵌套結構, img 這個標籤是我們引入圖片的關鍵(但並不是影響效果的關鍵,只是為了美化),大家要注意路徑,才可以正確的引入;關鍵點是架構舞台div(stage) 容器div(container);圖二是控制圖片的大小為了看的舒服一點;

css怎麼讓圖片向左移動

然後就是樣式了,下圖是基礎的構建3D效果時採用舞台的樣式選擇(小編是以此為基礎做3D效果的,如果只是為了2D 位移這個程式碼可以無視當然stage div 也可以不寫) perspective 控制的視距;perspective-origin 控制視角(都是涉及3d 的)

css怎麼讓圖片向左移動

container 這個div才是控制2D 位移的關鍵,關鍵屬性就是transform 這個屬性transform:translate( px, px);這個就是2D場景中控制位移的屬性;

這裡transfo-style:preserver-3d;可以讓div 變成3d,自然可以實現2d效果;transition 這個是控制過渡,實現動態的畫面效果;

css怎麼讓圖片向左移動

#這個下面就是控制動態效果, 滑鼠移上圖片移動( :hover 偽類選擇器配合上面transition 這個屬性);transform:translateX(150px),這個是控制圖沿著X軸正方向移動;注意X 是大寫的;

css怎麼讓圖片向左移動

css怎麼讓圖片向左移動

##################### ##########

以上是css怎麼讓圖片向左移動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板