Given this transform, where does the element actually end up relative to its starting position, and why?.box { transform: translateX(50%) rotate(45deg) translateX(50%); }