技術標籤：CSS筆記html5css3

2D移動其實是2D轉換裡面的一種功能，它可以改變元素在頁面中的位置，類似於postion和margin。

語法格式：
transform:translate(x,y)，後面需要跟px單位；也可以分開寫
transform:translateX(10px);
transform:translateY(10px);

例如：

<style>
	div {
         width: 100px;
         height: 100px;
         background-color: brown;
}
    div:first-child
 
 {
         transform: translate(20px,20px);
}
    div:last-child {
         background-color: skyblue;
}
</style>

<div></div>
<div></div>

最終會呈現出這樣一個效果，該盒子移動了，但不會影響到其他元素：

重點：
2D轉換中的移動，是沿著X和Y軸移動元素的；
translate移動最大的優點：不會影響到其他元素的位置；（像使用定位和外邊距來移動元素，都會影響到其他元素的位置）
對行內標籤沒有效果。