• 平移

transform: translateX(200px);
transform: translateY(200px);
/* z軸面向自己,需要添加透視,要不然看不到效果 perspective近大遠(yuǎn)小 */
transform: perspective(300px) translateZ(200px);
/* translate 合并寫(xiě)法 僅支持2D */
transform: translate(100px, 100px);
/* translate3d 合并寫(xiě)法,并且可以啟動(dòng)GPU加速渲染 */
transform: perspective(300px) translate3d(100px, 100px, 100px);

• 縮放

 /* 參數(shù)是縮放倍數(shù) 默認(rèn)是1倍 */
transform: scaleX(2);
transform: scaleY(2);
transform: scale3d(2, 2, 1);

• 旋轉(zhuǎn)

 /* 參數(shù)是角度 默認(rèn)是0deg */
/* x是左右方向 y是上下方向 z是內(nèi)外方向*/
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
/* 旋轉(zhuǎn)的中心點(diǎn) top left right bottom*/
/* transform-origin: top left; */
/* 合并寫(xiě)法,可以傳多個(gè)transform屬性 */
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
/* translate3d 合并寫(xiě)法,并且可以啟動(dòng)GPU加速渲染 
  參數(shù) x,y,z,度數(shù), 0表示不執(zhí)行,1表示執(zhí)行
*/
transform: rotate3d(0, 0, 0, 45deg);
/*開(kāi)啟3D渲染 
  指的是多個(gè)子控件在內(nèi)部發(fā)生位移,縮放,旋轉(zhuǎn)之后,發(fā)生重疊的時(shí)候可以穿透彼此,形成3D效果*/
transform-style: preserve-3d;