Alignment issues, 3D rotation

[Rockerby]

Hi guys,

 

I've been having a play around with the JS animations for a few weeks now (having loads of fun making stuff fly about the place!) but have decided to notch it up a level and try some 3D animations.

 

Basically I'm trying to rotate a 3D cube around the Y axis and am having an issue getting the 4 front facing sides of the cube to stay where they should be. They sort of 'bounce' from the edge of the cube by a small margin. I've setup a fiddle to help explain the issue for which I've taken out 3 of the cube faces to showcase the issue - http://jsfiddle.net/rockerby/sVTaU/1/

 

I've tried playing around with the transform origin rather than animating the 'z' and 'x' properties on rotate but can't seem to get this to look right.

 

Any help would be greatly appreciated!

[Carl]

Hi and welcome to the GreenSock forums.

 

Glad to hear you are enjoying the platform.

Thanks so much for providing the fiddle, very helpful. 

 

I totally understand how you were trying to get this to work, but I have an approach that you will find more solid.

 

Instead of animating each side of the cube, just build a cube and animate the cube as a single unit. I imagine you tried this, and it is kind of tricky until you know the secret;)

 

The trick to building the cube is to give each side (div) the same transformOrigin like so

 

 

 

TweenLite.set([topface, bottomface, leftface, backface], {transformOrigin:"50% 50% -100"})
 

the third parameter in transformOrigin is the z position. That allows you to flip around a point behind the element. So what this does is literally put the transform origin in the center of the cube along the axis x, y,  and z

 

take a look here: http://jsfiddle.net/G5XRt/3/

(works awesome in webkit browsers)

 

Another component is wrapping the cube in an element that has a perspective set on it.

You'll notice I added another outer div called #cubeHolder

 

It can take some time to really get handle on all the various perspective settings and transformOrigins, but once it clicks you can have a lot of fun, which I'm quite sure you will.

[Rodrigo]

Hi,

 

Another alternative would be to put all the faces inside a container and rotate that container using the transform-style property, something like this:

CSS

.container {
    perspective: 500px;
    border: 1px solid black;
    margin:50px;
    background:#ccc;
    width:150px;
}
#cubeParent{
    transform-style:preserve-3d;
    height:150px;
    width:150px;
    
}
#face1, #face2, #face3{
    height:150px;
    width:150px;
    position:absolute;
}
#face1{
    background:#00F;
}
#face2{
    background:#f0f;
}
#face3{
    background:#063;
}

The container style is just to have a reference of the cube's position, and the most important thing is that the #faceCube has transform-style: preserve3d, without that it doesn't works.

 

HTML

<p>
<button id="btn1">Tween Faces</button><button id="btn2">Rotate Parent</button>
</p>

<div class="container">
	<div id="cubeParent">
    	<div id="face1"></div>
        <div id="face2"></div>
        <div id="face3"></div>
    </div>
</div>

JS

var tl1 = new TimelineMax({paused:true}),
	face1 =$("div#face1"),
	face2 =$("div#face2"),
	face3 =$("div#face3"),
	cubeParent = $("div#cubeParent"),
	btn1 = $("button#btn1"),
	btn2 = $("button#btn2");

tl1
	.to(cubeParent, .5, {z:'-=75'})
	.to(face1, .5, {rotationY:90, x:'-=75'})
	.to(face2, .5, {rotationX:90, y:'-=75'}, '-=.5')
	.to(face3, .5, {rotationX:90, y:'+=75'}, '-=.5');

btn1.click(function()
{
	tl1.play(0);
});

btn2.click(function()
{
	TweenMax.to(cubeParent, .5, {rotationY:'+=45'});
});

You can see it working here:

http://jsfiddle.net/rhernando/PfPZm/

 

Hope this helps,

Cheers,

Rodrigo.

[Rockerby]

Thanks very much for the responses, didn't expect anything this quick! I've checked them both out and it seems so simple (always is when someone shows you the answer).

 

Both examples are very similar so I'll do a bit more research into them both and have a 'fiddle' to see what I can come up with. One thing I did notice on the cube you posted Carl, was that it looks a bit skewed on the slower rotations which I'm sure is something to do with the perspective and the way we are 'looking' at the cube.

[Carl]

Hey, Rockerby. Glad to help.

Yeah their was some annoying distortion in my example I think I got a handle on it.

update: http://jsfiddle.net/G5XRt/9/

[Rockerby]

Cheers for looking at that Carl. I noticed you'd removed the perspective from the cube wrapper, that gives some pretty crazy results when you start changing the perspectives independantly.