fix(drag-drop): apply translation transform before user transforms (#…

…14712)

Currently we apply our own transforms after any of the user's transforms, however this can result in some weird behavior if the user defined something like `rotate`. These changes move our values to be first.

Fixes #14699.

src/cdk/drag-drop/directives/drag.spec.ts

@@ -189,7 +189,7 @@ describe('CdkDrag', () => {
 
         dragElement.style.transform = 'translateX(-50%)';
         dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.style.transform).toBe('translateX(-50%) translate3d(50px, 100px, 0px)');
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateX(-50%)');
       }));
 
       it('should not generate multiple own `translate3d` values', fakeAsync(() => {
@@ -200,10 +200,10 @@ describe('CdkDrag', () => {
         dragElement.style.transform = 'translateY(-50%)';
 
         dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(50px, 100px, 0px)');
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateY(-50%)');
 
         dragElementViaMouse(fixture, dragElement, 100, 200);
-        expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(150px, 300px, 0px)');
+        expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px) translateY(-50%)');
       }));
 
       it('should prevent the `mousedown` action for native draggable elements', fakeAsync(() => {

src/cdk/drag-drop/drag-ref.ts

@@ -491,9 +491,11 @@ export class DragRef<T = any> {
           constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
       const transform = getTransform(activeTransform.x, activeTransform.y);
 
-      // Preserve the previous `transform` value, if there was one.
+      // Preserve the previous `transform` value, if there was one. Note that we apply our own
+      // transform before the user's, because things like rotation can affect which direction
+      // the element will be translated towards.
       this._rootElement.style.transform = this._initialTransform ?
-          this._initialTransform + ' ' + transform : transform;
+          transform + ' ' + this._initialTransform  : transform;
 
       // Apply transform as attribute if dragging and svg element to work for IE
       if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {