transform: translateX(x);
transform: translateY(y);
}
特性：
1. translate 不会影响其他标签的位置。
2. 设置百分比值时，是相对于自身标签。
3. 对行内标签（非块级标签）无效。
示例：
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.aa {
width: 200px;
height: 200px;
background-color: #006DCC;
border-radius: 50px;
transition: all 2s;
div.aa:hover {
transform: translate(500px, 100px);
</style>
</head>
<div class="aa"></div>
hello World!
</body>
</html>
旋转 rotate
语法：
div {
transform: rotate(10deg); /* 顺时针旋转10度,单位deg */
}
参数：
1. 度数，单位deg。
2. 整数顺时针，负数逆时针。
特点：
1. rotate 不会影响其他标签的位置。
示例（使用位移结构和基础样式）：
div.aa:hover {
transform: rotate(190deg);
}
设置转换中心点 transform-origin
div {
transform-origin: x y;
}
参数：
1. x和y默认值是 50%。可以设置像素。
2. 也可以设置方位名词 top right bottom left center。
缩放 scale
语法：
div {
transform: scale(x, y);
}
参数：
1. 直接指定数值scale(2, 2)，不增加单位，表示倍数。
2. 只写一个参数表示等比例缩放scale(0.5)。
特点：
1. 缩放不影响其他标签。
2. 可以设置缩放中心点，默认是标签中心，设置transform-origin。
示例（使用位移结构和基础样式）：
div.aa:hover {
transform: scale(2);
}
同时位移和旋转、缩放时，位移要放在第一位：
div.aa:hover {
transform: translate(500px, 0px) rotate(190deg) scale(2);
转载请指明出处！http://www.miselehe.com/article/view/148
