CSS3: рассчитать разницу между (left + 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 Преобразования изменяют локальную систему координат. Когда вы масштабируете элемент, вы также масштабируете любые переводы, примененные к этому div. Здесь - если вы измените перевод на 400px - вы получите тот же результат (обратный эффект масштаба).

Вы можете проверить, какие преобразования в настоящее время применяются к элементу, используя getComputedStyle ().