CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和 transform-origin。
transform 指定应用的变换功能
transform-origin 指定变换的起点
transform 的属性值：
none 无变换
translate(长度值或百分数值)
translateX(长度值或百分数值) 在水平方向、垂直方向或两个方向上平移元素。
translatY(长度值或百分数值)
scale(数值)
scaleX(数值) 在水平方向、垂直方向或两个方向上缩放元素
scaleY(数值)
rotate(角度) 旋转元素
skew(角度)
skewX(角度) 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度�
skewY(角度)
transform: translate(200px,200px); //向水平和垂直各移动 200 像素，也可以使用百分比
transform: scale(1.5,1.5); //水平、垂直方向放大 1.5 倍
transform: rotate(-45deg); //旋转元素，0 ~ 360 度之间，负值均可
transform: skew(45deg, 20deg); //倾斜元素，0 ~ 360 度之间，负值均可
transform-origin 属性值
left
center 指定x 轴的位置
right
top
center 指定y 轴的位置
bottom
百分数值 指定元素x 轴或 y 轴的起点
长度值 指定距离
这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。
它就会按照这个基准点进行变形。
//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;
