一、2D形变
平移
transform:translate(x，y)
相对当前位置，向左移动x像素，像下移动y像素
transform:translateX(num)
相对当前位置，向左移动num像素
transform:translateY(num)
相对当前位置，向下移动num像素
缩放
transform:scale(x，y)
scale()方法，该元素增加或减少的大小，取决于宽度(X轴)和高度(Y轴)的参数
transform:scaleX( num )
改变元素的宽度
transform:scaleY( num )
改变元素的高度
旋转
transform:rotate( 角度 );
参数是一个角度，表示旋转多少度
倾斜
transform:skew(角度x，角度y)
沿着x轴旋转多少度，沿着y轴转多少度
transform:skewX(角度x)
沿着x轴旋转多少度
transform:skewY(角度y)
沿着y轴旋转多少度
二、3D形变
平移
transform:translate3d( x , y , z );
定义三个方向上的平移
transform:translateZ( z );
定义Z方向的平移(单用看不出效果)
缩放
transform: scale3d( x , y , z);
定义3个方向上的缩放，同时可以分别实现3个方向的分别设置
旋转
rotate3d( x , y , z , angle )
x，表示旋转轴X坐标方向的矢量。
y，表示旋转轴Y坐标方向的矢量。
z，表示旋转轴Z坐标方向的矢量。
angle，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
三、过渡
transition属性
通过transition，我们可以在不使用flash的情况下，让元素从一种样式变化成另一种样式
body{
position: relative;
}
#box{
height: 100px;
width: 100px;
background-color: skyblue;
transition: margin-left 3s;
}
// var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
}
运行效果
