在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中文網其他相關文章!