变换模型通过如下的transform和transform-origin属性进行计算
从具体的模型开始
通过transfrom-origin的X,Y,Z计算值进行移动
从左到右复合应用在transform属性中的transform functions
使之前设置的transform-origin的值无效并进行移动
EXAMPLE1
CSS Code复制内容到剪贴板
div {
transform: translate(100px,100px);
}
EXAMPLE2
CSS Code复制内容到剪贴板
div {
height: 100px;
width: 100px;
transform-origin: 50px 50px;
transform:rotate(45deg)
}
transform-origin通过在X,Y轴方向上各移动50px来移动原点。元素沿着原点顺时针旋转了45°。当所有的transform functions都应用后，平移后的原点在X,Y轴上又各移动了-50px,回到了原来的位置。如图
理解
上面的话的意思就是，transform-origin的起始点是在原点的位置，旋转围绕着transform-origin在转，移动transform-origin是从原点开始的，而不是transform-origin的默认位置开始移动的(默认为元素中心，上例恰好也刚刚好移动到元素的中心位置)，transform-origin移动完后，并在元素上已经将transform functions应用完后，平移后的原点便会回到原来的位置，也就是说，下次改变transform-origin的位置仍然是从起始点算起（也就是之前的原点）。
EXAMPLE3
以下所涉图片深绿色部分均是没有使用变换属性时元素的本来样子。
CSS Code复制内容到剪贴板
div {
height: 100px;
width: 100px;
transform: translate(80px,80px) scale(1.5,1.5) rotate(45deg);
}
首先在X,Y轴上各移动80px,然后将元素放大150%，接着沿着Z轴方向顺时针旋转45°。
注意:缩放和旋转，都是通过元素的中心进行运转的，因为元素的默认transfrom-origin值为50% 50%。
通过嵌套元素可以实现与上面相同的效果
XML/HTML Code复制内容到剪贴板
<div style="transform: translate(80px, 80px)">
<div style="transform: scale(1.5, 1.5)">
<div style="transform: rotate(45deg)"></div>
