CSS3：变化属性 transform

transform 属性应用于元素的 2D 或 3D 转换。这个属性允许将元素进行移动 (translate)、旋转 (rotate)、缩放 (scale) 或倾斜 (skew) 等。

语法：

transform: none|transform-functions;

值：

• none：定义不进行转换
• transform-function：表示一个或多个变换函数，以空格分开

translate 位移

值	描述
translate(x,y)	定义 2D 转换
translate3d(x,y,z)	定义 3D 转换
translateX(x)	定义转换，只是用 X 轴的值
translateY(y)	定义转换，只是用 Y 轴的值
translateZ(z)	定义 3D 转换，只是用 Z 轴的值

（1）translate(x轴位移，y轴位移) - 元素沿X轴、Y轴进行平移; 正值-右下方移动，负值-左上方移动

div {
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:translate(80px, 80px)
}

（2）translateX(x轴位移) - 元素沿X轴进行平移；正值-右方移动，负值-左方移动

div {
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:translateX(80px)
}

（3）translateY(y轴位移) - 元素沿Y轴进行平移；正值-下方移动，负值-上方移动

div {
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:translateY(80px)
}

rotate 旋转

值	描述
rotate(angle)	定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿着 X 轴的 3D 旋转
rotateY(angle)	定义沿着 Y 轴的 3D 旋转
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转

rotate(旋转角度) - 元素以图形中心点为旋转中心，正值-顺时针旋转；负值-逆时针旋转；

div {
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:rotate(15deg)
}

scale 缩放

值	描述
scale(x[,y]?)	定义 2D 缩放转换
scale3d(x,y,z)	定义 3D 缩放转换
scaleX(x)	通过设置 X 轴的值来定义缩放转换
scaleY(y)	通过设置 Y 轴的值来定义缩放转换
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换

（1）scale(X轴缩放倍数，Y轴缩放倍数) - 基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数；0~1: 缩小；> 1：放大；

{
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:scale(1.2,1.6)
}

（2）scaleX(X轴缩放倍数) - 基于原来的位置对X轴进行伸缩变换，Y轴不变；

{
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:scaleX(1.4)
}

（）scaleY(Y轴缩放倍数) - 基于原来的位置对Y轴进行伸缩变换，X轴不变；

{
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform:scaleY(1.4)
}

skew 2D倾斜

值	描述
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换

（1）skew(X轴扭曲角度，Y轴扭曲角度) - 沿着 X 轴和 Y 轴进行 2D 倾斜；

{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skew(30deg, 10deg)
}

（2）skewX(X轴扭曲角度) - 沿着X轴进行 2D 倾斜,Y轴不倾斜；

{
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform: skewX(30deg)
}

（3）skewY(Y轴扭曲角度) - 沿着Y轴进行2D倾斜,X轴不倾斜；

{
  margin:30px;
  width:200px;
  height:100px;
  background: red;
  transform: skewY(10deg)
}