css3(4):变形处理transform
transform详细如下：
/*transform功能来实现文字或图像的*/
/*旋转、缩放、倾斜、移动变化*/
.div1{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
/*旋转功能*/
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.div2{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
/*缩放功能，1是正好，大于小于对应缩放，两个参数对应垂直水平*/
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.div3{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
/*倾斜功能*/
-moz-transform: skew(30deg);
-webkit-transform: skew(30deg,30deg);
-o-transform: skew(30deg);
-ms-transform: skew(30deg);
transform: skew(30deg,30deg);
}
.div4{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
/*移动功能*/
-moz-transform: translate(30px,30px);
-webkit-transform: translate(130px,130px);
-o-transform: translate(30px,30px);
-ms-transform: translate(30px,30px);
transform: translate(130px,130px);
}