css3-transform

css3的transform属性允许元素样式在二维空间中通过css进行形变。css的视觉格式模型（visual formatting model）给每一个元素的放置（positioned）描述了一个坐标系统。位置和大小在坐标空间中（coordinate space）被认为是以像素表示的，开始于原点由确定的（positive）值至右至下。

坐标空间可以通过transform属性来修改。使用transform属性，元素可以被移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）。

给transform属性一个具体的值而不是none，那么将给元素创建并应用一个全新的局部坐标系统。变换矩阵（transformtion matrix）将给出要渲染到该元素局部坐标系的映射（mapping）。

变换是累积的（cumulative）。意思是元素在它的父级元素坐标系上创建自己的局部坐标系。在用户的角度上来看，一个元素实际上累积了其所有祖先元素应用的变形，所有那些变形的累积给元素定义了一个当前变形矩阵。

坐标空间是一个具有两个坐标轴的坐标系：X轴是水平方向向右，Y轴是垂直方向向下。

变换是基于transform和transform-origin两个属性来计算的.

transform-origin 变换的原点

transform-origin属性可以改变一个元素的原点，例如rotate()旋转的中心点就是transform-origin设置的点。初始值为（50%， 50%， 0），基本语法：

1	transform-origin: 2px left;

可以定义的值：

x-offset 定义变形中心距离盒模型的左侧的距离（px, mm, cm）或百分比
y-offset 定义变形中心距离盒模型的顶部的距离或百分比
offset-keyword 定义相对应变形中心的偏移，left, right, top, bottom, center.
x-offset-keyword x轴距离关键字，有left,right,center.
y-offset-keyword y轴距离关键字，有top,bottom,center.
z-offset 定义变形中心距离用户视线（z=0）处的距离（不能是百分比）。

语法：

// 单值, x-offset y-offset
transform-origin: botton;
// 双值，使用两个数字值先水平后垂直，x-offset y-offset
transform-origin: 2px 3px;
// 双值，只要使用关键字了就不强制顺序，因为关键字会区分X和Y，但是如果是center的话，估计还是先水平后垂直，因为无法分辨
transform-origin: center 2px;
// 三值语法，第三个值表示z-offset，前面两个和上面规则一样
transform-origin: left top 2px;

transform的变换的基点就是这个transform-origin定义的原点。

transform 属性

transform属性允许修改css视觉格式模型的坐标空间，通过它，元素可以被移动（translate）、旋转（rotate）、缩放（scale）、扭曲（skew）。

translate 平移

1	transform: translate(tx[, ty]);

用向量[tx, ty]完成2D平移。如果ty没指定，那么默认为0。平移的值可以是距离，也可以是百分比。

可以使用分量函数来分别x平移和y平移：

// x轴平移tx
transform: translate(tx);
// y轴平移ty
transform: translate(ty);

一个常用的案例就是在盒子中保持里面的内容水平和垂直居中。用text-align和vertical-align根本不起作用，这时我们可以用绝对定位，然后使用位移来达到我们想要的效果：

我们需要一个div，里面放一个input

1
2
3

<div class="item">
    <input type="input" placeholder="right"/>
</div>

在div内部，input使用绝对定位，然后使用translate进行位移，让元素水平垂直居中：

.item{
   width: 200px;
   height: 60px;
   border: 1px solid #dddddd;
   position: relative;
   border-radius: 4px;
   input{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%)
   }
 }

rotate 旋转

从原点（由transform-origin属性指定）开始按照顺时针方向旋转元素到一个特定角度。对应的矩阵为：

1	[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]

语法为：

1	transform: rotate(angle);

比如我们还是上面的html，一个div里面一个input，我们想要里面输入框不动，外面的div旋转变成棱形。如下图：

我们只需要给div一个旋转角度，然后里面的input也会跟着旋转，所以我们也需要对里面的input反转角度：

.item{
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #dddddd;
  position: relative;
  border-radius: 4px;
  background: #999;
  transform: rotate(45deg);
  input{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 80px;
  }
}

scale 缩放

缩放倍率，由向量[sx, sy]描述一个二维缩放操作。语法为：

1	transform: scale(sx[, sy]);

sx，sy为数字，方别为x轴缩放倍率和y轴缩放倍率。如果sy不指定，那么默认为和sx相同。也可以分开写，x轴和y轴分别缩放：

1	transform scaleX(sx) sclaeY(sy);

继续使用上面的html，我们给元素进行缩放：

// 给元素一个透明的背景方便比对
background: rgba(225,225,225,0.5);
// x轴和y轴同时缩放2倍
transform: scale(2);

分别缩放不同的值：

skew 倾斜

元素在x轴和y轴方向以指定角度进行倾斜，如果ay未提供，那么在y轴上没有倾斜，语法为：

1	transform: skew(ax[, ay]);

也可以单独使用x轴倾斜或y轴倾斜：

// x轴方向倾斜
transform: skewX(ax);
// y轴方向倾斜
transform: skewY(ay);

使用倾斜我们可以很方便的做出平行四边形，如下图：

同样的，外面div倾斜的同时里面的input也倾斜了，我们需要让里面input一个反倾斜角度还原过来。

.item{
  display: inline-block;
  width: 150px;
  height: 100px;
  border: 1px solid #dddddd;
  position: relative;
  border-radius: 4px;
  background: rgba(225,225,225,0.5);
  transform: skew(45deg);
  input{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skew(-45deg);
    width: 80px;
  }
}

css3的以上变换的是实现与矩阵之上，底层的实现还是矩阵变换，比较复杂，使用单独的博客整理。可以参见另一篇博客：css3 矩阵变换