在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 。
用css3的transform属性就可以将div旋转。
一、m11,m12,m21.m22 是控制角度的，<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"><title>DIV 旋转属性的。
二、演示</title><meta http-equiv="X-UA-Compatible"
content="IE=EmulateIE8" /><style type="text/css">body {
font-family: "Arial", sans-serif} #example { position: absolute
border: #09F solid 1pxfont-weight: 900padding: 10pxdisplay: block
width: 500pxheight: 400pxmargin-top: 67pxmargin-left: 112px
transform: rotate(40deg)-o-transform: rotate(40deg)
-webkit-transform: rotate(40deg)-moz-transform: rotate(40deg)filter:
progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398,
M22=0.9660444431189779)} </style><!--[if IE]><style
type="text/css">#example { top: 50pxleft: 50px} </style>
<![endif]--></head><body><div
id="example">旋转成功</div>。
transform:rotate(720deg)-ms-transform:rotate(720deg) /* IE 9 */
-moz-transform:rotate(720deg) /* Firefox */
-webkit-transform:rotate(720deg) /* Safari 和 Chrome */
-o-transform:rotate(720deg) /* Opera */ 浏览器支持:
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。 定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个演示。
默认值：none
继承性：no
版本：CSS3
JavaScript 语法：object.style.transform="rotate(7deg)"
