CSS3中transform-origin,translate(),skew()三套件

一.transform-origin属性
允许您更改已转换元素的位置，该属性的默认值为50% 50%，其位置默认为中间。

div.empty_div{
position:relative;
height:100px;
width:100px;
margin:30px;
padding:50px;
border:1px solid black;
}
div.green_div{
padding:50px;                           
position:absolute;
background-color:#FF0000;
border:2px solid white;
transform:rotate(15deg);
transform-origin:30% 80%;
}

二.transform:translate属性
translate()方法从当前位置移动一个元素（根据给定的X轴，Y轴的参数），正值将会将元素向下推到其默认位置的右侧，而负值相反，负值将会将元素向上推到默认位置得左侧。
CSS代码如下；

div {
   padding: 50px;
   position: absolute;
   background-color: red;
   transform:translate(120px, 60px);
}

三.skew()
skew()通过给元素的X轴，Y轴设置倾斜角度，来实现倾斜。
代码格式如下：
transform:skew(X轴deg，Y轴deg);

CSS代码如下：

div{
padding:50px;
position:absolute;
background-color:#32cd32;
transform:skew(45deg);
-webkit-transform:skew(50deg);
}

/*特别说明
1、-moz代表firefox浏览器私有属性

2、-ms代表ie浏览器私有属性

3、-webkit代表safari、chrome私有属性

这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。

现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。*/