1、CSS3 transform属性
应用于2D或3D转换，允许对元素进行倾斜、移动、缩放或旋转。
2D转换元素能够改变元素 x 和 y 轴，3D转换元素还能改变其 Z 轴。
属性：
| none | 定义不进行转换。 | |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。 | |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 | |
| translateY(y) | 定义转换，只是用 Y 轴的值。 | |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。 | |
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
2、CSS3 transform-origin属性
元素转换的中心点默认为元素中心点的位置，使用transform-origin属性可以改变转换中心点的位置。
2D转换元素能够改变转换中心点的 x 和 y 轴位置，3D转换元素还能改变转换中心点的Z 轴位置。
必须与transform属性一同使用。
语法：transform-origin : x-axis y-axis z-axis
默认：transform-origin : 50% 50% 0
x-axis和y-axis可能的值：left | center | right | 数值(px) | 百分比(%)
z-axis可能的值：数值(px)
eg：倾斜
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#square{
background:blue;
width:200px;
height:200px;
position:absolute;
left:100px;
top:100px;
transform:skew(5deg, 5deg);
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>
eg：移动
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#square{
background:blue;
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
transform:translate(50px, 50px);
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>
eg：缩放
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#circle{
background:blue;
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:100px;
top:100px;
transform:scale(0.5, 2);
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
</html>
eg：旋转
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#circle{
background:blue;
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:100px;
top:100px;
}
#track{
width:300px;
height:300px;
border:1px solid grey;
border-radius:50%;
position:absolute;
left:50px;
top:50px;
}
#plane{
width:60px;
height:30px;
background:grey;
border-radius:10px;
position:absolute;
left:170px;
top:35px;
transform-origin:center 165px;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="circle"></div>
<div id="track"></div>
<div id="plane"></div>
</body>
</html>