css3-2D-transform之translate平移
阿新 • • 發佈：2019-01-09
translate平移應該也算是transform中用的比較多的屬性之一了，用法：transform：translate（x軸平移，y軸平移），也可以單獨設定：transform：translateX（），transform：translateY（）。如果只設置transform：translate（值），那麼只會在X軸進行平移。後期在transform-3D還會有transform：translateZ（），這個值在做6面體的時候非常好用，以後再談。
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover寬度增長</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 50px; background-color: #f00; transform:translate(50px,40px) } div{ width: 200px; height:300px; } p{ height: 50px; background-color: blue; } </style> </head> <body> <div></div> <p></p> </body> </html>
效果圖：
注意：translate平移之後不會將標準流中的元素擠開。其他取值可以一一進行嘗試。