本章主要探讨 HTML5 中 CSS3 的变形效果，通过变形效果，可以平移、缩放和旋转元素的功能。

一．transform

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin。

对于 transform 的属性值，具体如下表：

向水平和垂直各移动 200 像素，也可以使用百分比

transform: translate(200px,200px);

向水平平移 200 像素，不加后面的 0 也可以

transform: translate(200px,0);

transform: translateX(200px);

向垂直平移 200 像素

transform: translate(0,200px);

transform: translateY(200px);

水平、垂直方向放大 1.5 倍

transform: scale(1.5);

transform: scale(1.5,1.5);

水平、垂直方向缩小 0.8 倍

transform: scale(0.8,0.8);

水平方向放大 1.5 倍

transform: scaleX(1.5);

垂直方向放大 1.5 倍

transform: scaleY(1.5);

旋转元素，0 ~ 360 度之间，负值均可

transform: rotate(-45deg);

倾斜元素，0 ~ 360 度之间，负值均可

transform: skew(45deg, 20deg);

水平倾斜元素，0 ~ 360 度之间，负值均可

transform: skewX(45deg);

垂直倾斜元素，0 ~ 360 度之间，负值均可

transform: skewY(45deg);

通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧

transform: matrix(1,0,0,1,30,30);

不同的值可以累计，通过空格分割

transform: rotate(-45deg) scale(1.5);

二．transform-origin

transform-origin 属性可以设置变换的起点。

默认情况下，使用元素的中心作为起点。

具体设置方案参考如下表：

这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。它就会按照这个基准点进行变形。

默认值，以中心点变形

transform-origin: center center;

transform-origin: 50% 50%;

以左上角为基准点变形

transform-origin: left top;

transform-origin: 0px 0px;

三    ．浏览器版本

CSS3 中的变形效果最低版本和需要前缀版本如下：

兼容完整版

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: left top;

-moz-transform-origin: left top;

-o-transform-origin: left top;

-ms-transform-origin: left top;

transform-origin: left top;