一、scale()方法
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
transform:scaleX(x)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。
transform:scaleY(y)
说明：
y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。
transform:scale(x,y)
说明：
x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。
注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。
举例
<style type="text/css">
.main
{
margin:100px auto;
width:300px;
height:200px;
border:1px dashed gray;
}
#jxh51
{
width:300px;
height:200px;
color:white;
text-align:center;
transform:scaleX(1.5);
-webkit-transform:scaleX(1.5);
-moz-transform:scaleX(1.5);
}
#jxh2j
{
width:300px;
height:200px;
color:white;
text-align:center;
}
</style>
scale()实现放大功能
通过rotate()实现旋转功能
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}