translate

translate這個(gè)參數(shù)的，是transform 身上的，那么它有什么用呢？
其實(shí)他的作用很簡單，就是平移，參考自己的位置來平移
　　translate()
　　translateX()
　　translateY()
　　translateZ()
　　translate3d()

translateX

向X軸平移，填正數(shù)往右平移，填負(fù)數(shù)，往左平移

image

translateY

向Y軸平移，填正數(shù)往下平移，填負(fù)數(shù)，往上平移

image

translateZ

向Z軸平移，這個(gè)可能有點(diǎn)難理解，想像一個(gè)場景，你現(xiàn)在和電腦屏幕的距離，這就是Z軸的距離，電腦屏幕離你越近，那么translateZ() 里面的值 越大， 電腦屏幕離你越遠(yuǎn)， translateZ() 的值就越小。 所以說，Z 增加，那么這個(gè)電腦屏幕，離你就越近，

下面要用到旋轉(zhuǎn)，rotate，不懂的話，請點(diǎn)擊→css3系列之transform 詳解rotate

首先Z 軸是朝向我們的，所以 看不出效果，但是，我們把它轉(zhuǎn)個(gè)身，讓Z軸 面對(duì) 右邊，就可以了。

image

translate() 和 translate3d()

translate 是同時(shí)設(shè)置 translateX 和 translateY， 所以里面可以填兩個(gè)參數(shù)， 第一個(gè)值 X 第二個(gè) Y

translate3d 是同時(shí)設(shè)置 translateX ，translateY 和 translateZ 所以里面可以填三個(gè)參數(shù)

只不過有點(diǎn)不同的是， translate 如果第二個(gè)參數(shù)不填的話，默認(rèn)是0， 不過translate3d的話，人家就不同意你不填了，你三個(gè)參數(shù)，必須都給我填。

image