Transforrm属性是控制2D或者3D元素的缩放，倾斜，移动，旋转
<html><!DOCTYPE html>
<html>
<head>
<style>
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>
</head>
<body>
<p>Rotate the yellow div element:</p>
<div id="div1">HELLO</div>
Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);
</body>
</html>
上面代码复制到html文件你大概会明白transform作用
transform属性详解：
none 不进行任何转换
matrix 进行2D转换，6个值 语法
transform: matrix(2, 2, 0, 2, 45, 0);
translatr 定义2D转换 语法
transform: translate(45px, 1em); transform: translate(45px, 45px);
scale 2D缩放 语法
transform: scale(2, 2);
rotate 2D旋转 语法
transform: rotate(45deg);
skew 2D倾斜 语法
transform: skew(45deg, 45deg);
perspective 3D转换 语法
perspective: 100px;
transform-origin X，Y，Z轴旋转中心点2D（X、Y），3D（X、Y、Z） 语法
transform-origin: 100% 0% 0px;
none：定义进行转换
matrix(n,n,n,n,n,n)：进行2D转换，需要6个方位值
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义3的转换，需要16个4*4矩阵值
translate(x,y)：定义2D转换
translate3d(x,y)：定义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 转换元素定义透视视图。
