在CSS3中，通过 transform 属性来使用 transform 功能。
使用 rotate 方法，在参数中加入角度值，角度值后面跟表示角度单位的 deg 文字即可，旋转方向为顺时针旋转。
运行效果：
使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。
上面的示例使 div 元素缩小了50%。
另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。
上面的示例使 div 元素水平方向缩小了50%，垂直方向放大了一倍。
效果如图：
使用 skew 方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
上面的示例使 div 元素水平方向上倾斜了30度，垂直方向上倾斜了30度。
效果如图：
另外， skew 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。
使用 translate 方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
上面的示例把 div 元素水平方向上向右移动了 50px ，垂直方向上向上移动了 50px 。
另外， translate 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。
示例1：
效果如图：
示例2：
效果如图：
这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同，结果可能会不一样。
在使用 transform 方融进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。
接下来，我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。
运行效果：
transform-origin 属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right ， "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。
设置图片自适应，给图片设置display:blockwidth:100%不要设置高度，不要设置高度，不要设置高度。这样图片就能根据父级div适应大小，就是你设置一个div，里面放图片。div多大，图片就多大。高度自动适应，所以不能设置高度。将img的width和height设置成固定值而不是相对值，就不会变形。当然，若是需要的话你也可以将width和height设置成固定比例，这样虽然图片可以缩放，但是图片不会扭曲变形。
