在css3中，用transform可以实现文字或图像的旋转、缩放、倾斜和移动，并且该元素下的所有子元素，随着父元素一样转、缩放、倾斜和移动。

transform属性

transform的属性包括：rotate()、skew()、scale()、translate()，分别有x、y两个参数，比如rotatex()和rotatey()。

1、rotate()：旋转，参数为xdeg，x为数值，如：10deg。

.photo a{	display:inline-block;	overflow:hidden;	border:1px solid #ccc;	padding:5px;	border-radius:3px;	-webkit-border-radius:3px;	-moz-border-radius:3px;	-o-border-radius:3px;	-webkit-transform:rotate(15deg);	-moz-transform:rotate(15deg);	-o-transform:rotate(15deg);	transform:rotate(15deg);}

2、scale()：比例，“1.5”表示以1.5倍的比例放大，如果是负数表示为缩小。

    
     身世浮沉雨打萍。
    

.scale{	padding:5px;	color:#fff;	background-color:#666;	-webkit-transition:all 1s ease-in-out;	-moz-transition:all 1s ease-in-out;	-o-transition:all 1s ease-in-out;	transition:all 1s ease-in-out;}.scale:hover{	-webkit-transform:scale(1.5);	-moz-transform:scale(1.5);	-o-transform:scale(1.5);	transform:scale(1.5);}

3、skew()：倾斜。

    
     身世浮沉雨打萍。
    

.skew{	margin-top:10px;	padding:5px;	color:#fff;	background-color:#666;	-webkit-transform:skew(20deg);	-moz-transform:skew(20deg);	-o-transform:skew(20deg);	transform:skew(20deg);}

4、translate()：位移，如下例子中translate(120px,10px)表示向右移动120px，向下移动10px，如果是向上向左移动分别为负数。

    
     身世浮沉雨打萍。
    

.translate:hover{	-webkit-transform:translate(120px,10px);	-moz-transform:translate(120px,10px);	-o-transform:translate(120px,10px);	transform:translate(120px,10px);}