CSS3之变形transform

在CSS3中可以对元素进行变形处理，此时需要使用到transform，该属性可以对元素进行四种变形处理，旋转，倾斜，缩放，移动

旋转rotate

div{
  background:yellow;
  width:300px;
  height:200px;
  margin:100px 30px;
  -webkit-transform:rotate(30deg);//chrome、Safari
  -moz-transform:rotate(30deg);//Firefox
//顺时针旋转30度
}

缩放scale

div{
  background:yellow;
  width:300px;
  height:200px;
  margin:100px 30px;
  -webkit-transform:scale(2,2);
  -moz-transform:scale(2,2);
//水平方向和垂直方向上变为原来的两倍
}

倾斜skew

div{
  background:yellow;
  width:300px;
  height:200px;
  margin:100px 30px;
  -webkit-transform:skew(30deg,30deg);
  -moz-transform:skew(30deg,30deg);
}
//水平方向向上倾斜30度，垂直方向向上倾斜30度

移动translate

div{
  background:yellow;
  width:300px;
  height:200px;
  margin:100px 30px;
  -webkit-transform:translate(100px,100px);
  -moz-transform:translate(100px,100px);
}
//向右向下平移100px

• 该属性可使用负值，此时元素向相反方向移动