Html+CSS transform屬性中的 translate屬性值

上一篇講了rotate，這一次我們再細講一下translate

 

下面我們從3個方面開始介紹：

 

1、translate(x,y)  水平方向和垂直方向同時移動，

   取值x表示x軸過渡值  取值y表示y軸過渡值  ----如果沒有賦值，預設是0  預設以元素的中心點為基點，可以通過transform-origin進行基點的設定  x,y如果為負就反方向移動 Css代碼   translate(100px,200px);      
2、 translateX(<translation-value>)  通過給 x方向上的指定參數值,實現x軸方向上的移動。
Css代碼   translateX(100px);    

 

3、translateY(<translation-value>) 通過給y方向上的指定參數值,實現x軸方向上的移動。

 

Css代碼   translateY(200px);