Drag svg clippath in 3D

[supa]

Hi all, 

wanted to ask if there is some possibility to drag a svg clip-path attached to a div in 3D space respecting the current 3D transformations created by a third party software (krpano). 
In krpano the 3D space allows me to set the image- and clip-path-containing div in x-offset and y-offset (or z- and y-offset when on another 90° turned wall). I can drag x/y with below code snippet but the image gets distorted. 
 
In my codepen I was able to adapt Craigs work with dragging an SVG clip-path attached to a alpha-containing picture frame-div in 2D space. 

Now I wanted to adapt this to my 3D space and don't know how to take the current matrix3d translations of the frame-div from krpano into account. The frame-div is set on a wall. Now dragging the div works, I can drag and even change the clip-path a bit, but the dragged div gets distorted to 2D space until released (see attached screenshot: left: distorted div, middle: cut-out clip-path on another div image which moves when dragging the distorted frame, right: the goal of my undertaking, the undistorted frame).

The 3D transform of the clip-path div looks like this before distortion:
translate3d(1280px, 657.5px, 0px) perspective(465.882px) rotateZ(0deg) translateZ(465.882px) rotateX(-1.95988deg) rotateY(-89.562deg) translate3d(0px, 0px, 0px) translate3d(-462px, -110px, -2px) rotateY(88.5deg) rotateX(0deg) scale3d(1, 1, 1) translateZ(0px) rotate(0deg) translate(243.682px, -6.00213px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(0.2) translate(-500px, -500px)

GSAP does this to the transform:
transform: matrix3d(0.20001, -0.00000226566, 0.000138008, 0, 0.0000129674, 1.14475, 0, 0, -0.00069, 0, 0.99999, -0.00170998, 1107, -57, 121.898, 0.791554);

Is there a possibility to copy the translation values to the GSAP drag function?

 

Draggable.create("#frame", {
	onDrag: function() {
    	TweenMax.set("#framepath", {
        	x: this.x,
            y: this.y
      	});
	}
});

Thanks for any hints, 
supa

See the Pen jOaeEQV by maxbln (@maxbln) on CodePen

[OSUblake]

Hi Supa,

 

GSAP does not work with stacked transforms like that. Notice how many translate3d calls are in that transform. It's translating, rotating, translating, scaling, translating, etc all in a single call. You'd have to do A LOT of math just to convert a single x/y value to properly work in that 3d space. You may want to consider posting your request in our Jobs & Freelance section to find someone who might experience doing something similar to what you are doing.