CSS3中还有很多属性值得学习和使用的，比如Transform。Transform从翻译字面上的意思就是改变和变形的意思。Transform的属性值分为：移动translate、缩放scale、旋转rotate、扭曲skew和矩阵变形matrix。下面就一起看看有关Transform的介绍吧。以下实例请在谷歌下看哟。

　　一、Transform的语法

　　对象选择器 {transform: rotate(旋转) | scale(缩放) | skew(扭曲) | translate(移动) | none(不变形);}

　　注：box-shadow可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“,”分开。

　　二、Transform参数值的用法

　　1、旋转rotate

　　rotate(+deg) ：通过指定的角度参数对原元素指定一个2D rotation(2D 旋转)，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg).

　　CSS代码：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}
.c,.b {left:200px;}
.c {background:red;-webkit-transform:rotate(30deg);}

　　HTML代码：

<div class="a">原位置</div>
<div class="b">原位置</div>
<div class="c">旋转30度</div>

　　预览效果：

　　2、移动translate

　　移动translate我们有三种情况：translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)，具体使用方法如下：

　　(1)translate(x,y) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(30px,30px)。

　　CSS代码：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}
.c,.b {left:200px;}
.c {background:red;-webkit-transform:translate(30px,30px);}

　　HTML代码：

<div class="a">原位置</div>
<div class="b">原位置</div>
<div class="c">位移(30px,30px)</div>

　　预览效果：

　　(2)translateX(30px) ： 通过给定一个X方向上的数目指定一个移动的值。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(30px)。

　　CSS代码：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}
.c,.b {left:200px;}
.c {background:red;-webkit-transform:translateX(30px);}

　　HTML代码：

<div class="a">原位置</div>
<div class="b">原位置</div>
<div class="c">位移(30px,0)</div>

　　预览效果：

　　(3)translateY(30px) ：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(30px)。

　　CSS代码：

div {width:100px;height:100px;border:1px solid #000;position:absolute;top:50px;left:50px;}
.c,.b {left:200px;}
.c {ba