css怎麼讓圖片向左移動

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

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

推薦：《css影片教學》

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

css讓圖片向左移動

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

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

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

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

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

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

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