Help with 3d rotation origin

[Luckyde]

Hi guys,
I'm doing a 3d template for a job using a html5 software for designers and I need to figure out how to do a 3d turning box using js and not css classes,  because the program is very limited. So i figured out thanks to the forums and help docs how to set up a 3d box using a couple of IDs and rotations, but I can't figure out how to make it rotate as a whole. When i use rotationX Y the sides rotate relative to themselves and not the whole box. I don't have the ability to use Divs inside of divs inside this software but I can use element ids. So I have 6 elements with Ids sides1 to 6 and my code is
On setup

var cubeSize = 200;
TweenLite.set(sides[i].parentNode, {transformStyle: "preserve-3d",perspective:800,perspectiveOrigin:"50% 100px"}); 
sides[i].style.opacity=0.3;
sides[i].style.width=cubeSize+"px";
sides[i].style.height=cubeSize+"px";
sides[i].style.left="0px"
sides[i].style.top="0px"

On Drag

	stageLeft = (event.pageX-mainStage.offsetLeft);
	stageTop = (event.pageY-mainStage.offsetTop);
	centreX = (parseInt(mainStage.style.width)/2)-stageLeft;
	centreY = (parseInt(mainStage.style.height)/2)-stageTop;
	 sides2Left=(parseInt(mainStage.style.width)/2)-parseInt(sides[2].style.width)/2
		

	TweenLite.set(sides[1], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2, z: 100+'px' });
	TweenLite.set(sides[2], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationY: 180, z: '-100px' , transformOrigin: "50% 50%"});
	TweenLite.set(sides[3], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, rotationZ: 90, rotationY: 90, x: '100px', transformOrigin: "50% 50%" });
	TweenLite.set(sides[4], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, rotationZ: -90, rotationY: -90, x: '-100px' , transformOrigin: "50% 50%"})
	TweenLite.set(sides[5], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: 90, y: '-100px' , transformOrigin: "50% 50%"});
	TweenLite.set(sides[6], { left:-centreX+cubeSize/2, top:-centreY+cubeSize/2,rotationX: -90, y: '100px' , transformOrigin: "50% 50%"});

And it results in 
http://www.luckyde.com/ipad/boxtest/index.html
Which is great, but as soon as i introduce rotationX, Y relative to the centre of the stage they start rotating relative to their own centre. I'm sure this is super basic, but what variable am i missing that I can say rotate based off that, or is there a way to group these getElementByIDs in javascript into one and rotate that? Prefferably the first option

Thanks so much for your help!

[Rodrigo]

Hi,

 

Perhaps this could help a little. It doesn't work on IE though (it uses perserve-3d):

 

See the Pen aokHc by rhernando (@rhernando) on CodePen

 

Alexey created a cross-browser trick to make it work in IE, check His posts and codepen samples:

 

http://greensock.com/forums/topic/8231-animation-of-3d-cube-in-ie10-working-with-css-but-need-help-to-convert-to-gsap/#entry43835

 

Hopefully this will help. Let us know if you need something else.

 

Happy Tweening!!

[Luckyde]

Hi Rodrigo, thanks for that

However as mentioned above the method with css  and a div inside a div tag doesn't work in my case
"<div id="cubeParent">

    <div class="cubeFace" id="face1"></div>

        <div class="cubeFace" id="face2"></div>

        <div class="cubeFace" id="face3"></div>

        <div class="cubeFace" id="face4"></div>

        <div class="cubeFace" id="face5"></div>

        <div class="cubeFace" id="face6"></div>

    </div>

</div>

"
Is it possible to create the "$("div.container)" using Javascript and place the 6 sides ( $("button#btn1-6)) inside of it then rotate it? Without the div in div way using html.

[Rodrigo]

Hi,

 

If I understand correctly you want to rotate the parent and make the child elements to follow that rotation. If that is the case, that's precisely what the codepen I made does, it places the faces in a container. That container is wrapped inside another in order to give the latter a perspective value and create the 3D animation.

 

Now in order to create a single container you can use a feature of the CSS Plugin to apply the same transform perspective to every element being animated in a 3D fashion. Note that any other element being animated in 2D won't have the perspective property applied to it:

CSSPlugin.defaultTransformPerspective = 1500;

Now in order to add elements to the container you can use either jQuery or Vanilla:

 

http://api.jquery.com/category/manipulation/dom-insertion-inside/

 

http://www.w3schools.com/jsref/met_node_appendchild.asp

 

I created the following sample using jQuery because I'm kind of lazy right now to do it in vanilla, but it shouldn't be much harder:

 

See the Pen JdLyQK by rhernando (@rhernando) on CodePen

 

Rodrigo.