1.transform 2D转换
共有如下2D转换方法：
- translate()
- rotate()
- scale()
- skew()
- matrix()
（1）.translate()方法
语法：translate(xpx,ypx)，即把元素从左向右移动 x 个像素，从上向下移动 y 个像素。
例：transform: translate(50px,100px);
则元素从左侧移动 50 像素，从顶端移动 100 像素。
（2）.rotate()方法
语法：rotate(xdeg)，如果 x 为正值，则把元素顺时针旋转 x 度，如果 x 为负值，则把元素逆时针旋转 x 度。
例：transform: rotate(30deg);
则元素顺时针旋转 30 度。
（3）.scale()方法
语法：scale(x,y)，即把宽度转换为原始尺寸的 x 倍，把高度转换为原始高度的 y 倍。
例：transform: scale(2,4);
宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
（4）.skew()方法
语法：skew(xdeg,ydeg) ，即把元素围绕 X 轴把元素翻转 x 度，围绕 Y 轴翻转 y 度。
例：transform: skew(30deg,20deg);
围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
（5）.matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
2.transform 3D转换
rotateX() 方法
语法：rotateX(xdeg);即沿着 X 轴向里翻转 x 度
例：
<style>
div {
width: 100px;
height: 100px;
background-color: #ccffff;
}
.box1 {
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div>这是一个 div 元素</div>
<div class="box1">这是一个旋转后的 div 元素</div>
</body>
实际效果如下
rotateY()，rotateZ()和rotateX()一样，只不过是沿Y轴旋转（这里的Y轴是向下的）
rotate3d()方法
语法：rotate3d(x,y,z,angle)
元素旋转的角度由rotate3d()函数的第四个参数来决定，它是一个值。rotate3d()函数的前三个参数用于决定各个轴的旋转方向。正值表示顺时针旋转，负值表示逆时针旋转。
transform: rotate3d(1, 0, 0, 45deg); /* 绕X轴顺时针旋转45度 */
transform: rotate3d(0, 1, 0, 45deg); /* 绕Y轴顺时针旋转45度 */
transform: rotate3d(0, 0, 1, 45deg); /* 绕Z轴顺时针旋转45度 */
transform: rotate3d(0, 0, 0, 50deg); /* 不会发生旋转 */
scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)方法
x,y,z初始值为1；
scaleX(x)，沿x轴变成之前的x倍；
scaleY(y)，沿y轴变成之前的y倍；
scaleZ(z)，沿z轴变成之前的z倍；
scale3d(x,y,z)，当scale3d()中x和y值同时为1，即scale3d(1,1,z)，其效果等同于scaleZ(z)。
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
