任何一個元素都有一個中心原點，默認情況下，元素的中心原點位於X軸和Y軸的50%處。
默認情況下，CSS3變形進行的位移、縮放、旋轉、傾斜都是以元素的中心原點進行變形。
假如我們要使得元素進行位移、縮放、旋轉、傾斜這些變形操作的中心原點不是原來元素的中心位置，那該怎麼辦呢？
在CSS3中，我們可以通過transform-origin屬性來改變元素變形時的中心原點位置。
語法：
transform-origin:取值;
說明：
transform-origin屬性取值有2種：一種是采用長度值，另外一種是使用關鍵字。長度值一般使用百分比作為單位，很少使用px、em等作為單位。
不管transform-origin取值為長度值還是關鍵字，都需要設置水平方向和垂直方向的值。transform-origin屬性取值跟背景位置background-position屬性取值相似，大家可以回去看看，對比理解一下。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3中心原點transform-origin屬性</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
}
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform-origin:right center;
-webkit-transform-origin:right center;/*兼容-webkit-引擎浏覽器*/
-moz-transform-origin:right center; /*兼容-moz-引擎浏覽器*/
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏覽器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用“transform-origin:right center;”使得CSS3變形的中心原點由“正中”變為“靠右居中”。在這裡，元素進行旋轉是圍繞“新中心原點”作為旋轉的中心原點。