一、transform-origin的作用
transform-origin改變元素基點
（transform-origin是變形原點，原點就是元素繞着旋轉或變形的點）
注意：該屬性只有在設置了transform屬性的時候才起作用；
如果在不設置的情況下，元素的基點默認的是其中心位置。
在沒有使用 transform-origin 屬性的情況下 transform 的 rotate , translate , scale , skew , matrix 這些操作都是以自身在中心位置為原點的。
二、transform-origin的用法
語法：
-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ]
transform-origin 屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。
2D的變形 中的 transform-origin 屬性可以是一個參數值，也可以是兩個參數值。如果是兩個參數值時，第一值設置水平方向X軸的位置，第二個值是用來設置垂直方向Ｙ軸的位置。
3D的變形 中的 transform-origin 屬性還包括了Ｚ軸的第三個值。其各個值的取值簡單說明如下：
- top = top center = center top 等價於 50% 0
- right = right center = center right 等價於 100%或(100% 50%)
- bottom = bottom center = center bottom 等價於 50% 100%
- left = left center = center left 等價於 0或(0 50%)
- center = center center 等價於 50%或（50% 50%）
- top left = left top 等價於 0 0
- right top = top right 等價於 100% 0
- bottom right = right bottom 等價於 100% 100%
- bottom left = left bottom 等價於 0 100%
left,center right 是水平方向取值，對應的百分值為left=0%;center=50%;right=100%
top center bottom 是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心原點</title>
<style> .box{ width:100px;height: 160px; border:2px solid #faa; margin: 50px 150px;
/*padding:30px;*/ box-shadow: 5px 5px 5px #ddd;
} .bo{ width:100px;height:160px; background-color:rgba(0,22,255,0.3); border:2px solid red; margin:auto; transform:rotate(45deg);
} .box12{
/*transform-origin:0 0;*/ transform-origin:top left;
} .box22{ transform-origin:50% 0;
/*transform-origin:top;*/
} .box32{ transform-origin:0 50% ;
/*transform-origin:left;*/
} .box42{ transform-origin:100% 50% ;
/*transform-origin:right;*/
} .box52{ transform-origin:50% 100%;
/*transform-origin:bottom;*/
} .box62{
/*transform-origin:50% 50%;*/ transform-origin:center;
} .box72{ transform-origin:100% 0;
/*transform-origin:top right;*/
} .box82{ transform-origin:0 100% ;
/*transform-origin:bottom left;*/
} .box92{ transform-origin:100% 100%;
/*transform-origin:bottom right;*/
}
</style>
</head>
<body> 1 <div class="box">
<div class="box12 bo">測試目標1（左上角頂點）</div>
</div> 2 <div class="box">
<div class="box22 bo">測試目標2（頂邊中點）</div>
</div> 3 <div class="box">
<div class="box32 bo">測試目標3（左邊中點）</div>
</div> 4 <div class="box">
<div class="box42 bo">測試目標4（右邊中點）</div>
</div> 5 <div class="box">
<div class="box52 bo">測試目標5（底邊中點）</div>
</div> 6 <div class="box">
<div class="box62 bo">測試目標6（中心點）</div>
</div> 7 <div class="box">
<div class="box72 bo">測試目標7（右上角頂點）</div>
</div> 8 <div class="box">
<div class="box92 bo">測試目標9（右下角頂點）</div>
</div> 9 <div class="box">
<div class="box82 bo">測試目標8（左下角頂點）</div>
</div>
</body>
</html>
實現效果：
