1、平移的效果 translate

div{
 transform:translate(x,y);  //x轴  y轴 
 transform:translateX(x); //x轴方向
 transform:translateY(x); //y轴方向
}

• translate最大的优点：不会影响到其他元素的位置

• 参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言的

• 对行内标签不起效果

• 
  

2、旋转 rotate

语法：transform:rotate(度数) // 单位是deg（度）

• rotate里面跟度数， 单位是 deg 比如 rotate(45deg)

• 角度为正时，顺时针，负时，为逆时针

• 默认旋转的中心点是元素的中心点

transform-origin可以指定旋转点

div{
 transform: rotate(45deg);
}

3、缩放 scale

给元素添加上了这个属性就能控制它放大还是缩小

语法：

/*元素按照指定值沿着 X 轴和 Y 轴缩放, 只有一个参数表示等比例缩放，参数表示原来大小的倍数，所以当参数为1时就相当于大小没变*/
transform: scale(x,y) | scale(a); 
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

transform:scale(1,1) ：宽和高都是原来的一倍，相当于没有放大

transform:scale(2,2) ：宽和高都放大了2倍

transform:scale(2) ：只写一个参数，则第二个参数则和第一个参数一样，相当于 scale(2,2)

transform:scale(0.5,0.5)：小于1的参数表示缩小

sacle缩放最大的优势：可以设置缩放中心点，默认以中心点缩放的，而且不影响其他盒子

div {
transform: scale(1.1);
}