在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 翻转和旋转的区别如下：概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate
1、旋转，利用rotate来实现，代码如下：
-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg)指定firefox浏览器私有属性
transform:rotate(10deg)一般浏览器翻转的角度为10弧度
2、 翻转，利用scale来实现，代码如下：
scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转
水平翻转：
-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转
-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转
transform:scale(-1，1)水平轴为-1，代表水平翻转
垂直翻转：
-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转
transform:scale(1，-1)垂直轴为-1，代表垂直翻转
整出来的效果：
我的css代码：
.main {margin: 0 auto padding: 0 width: 60% border: 3px solid #FB3 height: 710pxposition: relative
}
.one{
height: 6em line-height: 6em
position: absolute top: 0 left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.one>div, .three>div {
-webkit-transform:rotate3d(1,0,0,-90deg) scaleZ(3)
transform:rotate3d(1,0,0,-45deg) scaleZ(3)
perspective:150px
}
.two{
position: absolute top: 3.55em left: 0
height: 6em line-height: 6em width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center bottom
transform-origin: center top
}
.two>div, .four>div {
-webkit-transform:rotate3d(1,0,0,45deg) scaleZ(3)
transform:rotate3d(1,0,0,45deg) scaleZ(3)
perspective:150px
}
.three{
height: 6em line-height: 6em
position: absolute top: 9em left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.four{
height: 6em line-height: 6em
position: absolute top: 12.5em left: 0 width: 100%
-webkit-perspective:150px
perspective:150px
-webkit-transform-origin: center top
transform-origin: center bottom
}
.red {background-color: red float: left font-size: 4em width: 25% text-align: center}
.blue {background-color: blue float: left font-size: 4em width: 25% text-align: center}
.green {background-color: green float: left font-size: 4em width: 25% text-align: center}
.yellow {background-color: yellow float: left font-size: 4em width: 25% text-align: center}
1、one，two，three，four这几个div都是舞台，容器元素，所以不在这几个上面应用3d变化。只是设置视角什么的。
他们的子元素设置变化。
2、one，two，这些元素使用了绝对定位。使用绝对定位主要是，大家变换以后中间有空隙，为了消除空隙，使用translate3d对Y进行变换消除空隙应该是不行的，因为变化以后相邻两个图形大小不一致了。当然3D空间中两个不一样大的东西在图片上看起来一样大，应该也是可以的，不过这个就很复杂了吧，只变化Y肯定是不行的。你的不对成应该主要就是因为这个。
3、one，two，这些容器元素我设置了高度，实际上也可以不设置高度，高度主要是用来计算消除空隙的，但是消除多少（也就是每个容器的top应该设置为多少）这个我现在也不会算，图里面是试出来的。不过看你的图没有空隙，你应该有自己的计算方法吧。
试了好久，想的脑袋疼 ＝。＝！
