CSS3：变化属性 transform

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

语法：

transform: none|transform-functions;
复制代码

值：

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

translate 位移

（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(旋转角度) – 元素以图形中心点为旋转中心，正值-顺时针旋转；负值-逆时针旋转；

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

scale 缩放

（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倾斜

（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)
}
复制代码