CSS3：计算（左+ scale3d）和（transition3d + scale3d）之间的差异

Question

为什么（scale3d和left）和（scale3d和translate3d）之间存在差异？我如何计算它们之间的差异？

参见示例：jsBin

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: rgba(0,0,0, .3);
    border-radius:7px;
    font-size:20px;

    -webkit-transform-origin:50% 50%;
}
#t1 {
    left: 200px;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}
#t2 {
    top: 200px;
    -webkit-transform: scale3d(0.5, 0.5, 1) translate3d(200px, 0, 0);
}

和简单的HTML：

<div id="t1">scale3d and left</div>
<div id="t2">scale3d and transition3d</div>

Answer 1

CSS3 Transforms改变局部坐标系。缩放元素时，您还要缩放应用于该div的任何翻译。在这里 - 如果您将平移更改为400px - 您将获得相同的结果（扭转比例的影响）。

您可以使用getComputedStyle（）来检查当前应用于元素的转换。