Jump to content
GreenSock

megaman

3D transforms

Recommended Posts

I wish to use greensock to handle to 3D animations. 

I will explain what I want to do I and then post my questions.

I have an existing site which has an auto centered container div
It has a max-width:900px and width:100% applied.

I want to create a rotating effect by creating a second div

applying transform: translateZ(?) rotateY(90deg) to it, wrapping a container div around both and rotating the container in response to certain events.

The result i am looking for will be like this cube demo, but with only 2 faces
https://desandro.github.io/3dtransforms/docs/cube.html

 

I have the following questions

What i have described is a lot like making a CSS cube except it will only have two faces.
Normally you have to translate each face by 1/2 of the width of the faces in order to move them from the cube center to the correct position.
However my existing div is one of the faces and its width is not always fixed. 
Will i be able to get around this by having a simple CSS media query so that i can set translateZ(450px) when the container is at its max width of 900px and translateZ(50%) when it is at 100% width?
 

The existing div scrolls down (like a normal website) but i want the new one to be fixed at 100% height and have fixed positioning (so there is no scrolling when it is showing, i dont mind if the main div is technically scrollable while it isnt visiable)
Will i be able to achieve the rotating cube effect when fixed positioning is applied one of the faces?

 

I have been experementing with transform-origin but no matter what settings i get i cant make a cube (or a 2 faced cube) roatate on the spot. how can i do this?

What would be the correct perspective and perspective-origin to use?

Link to comment
Share on other sites

Hi megaman  :)

 

It's difficult to get you GSAP related answers with only a written description of what you are attempting to do.

 

You said: "I have been experimenting with transform-origin but no matter what settings i get i cant make a cube (or a 2 faced cube) rotate on the spot. how can i do this?"

 

Since you've been experimenting, I'll assume you have some code for us to review. By showing us the progress you've made so far and live code that we can edit, it's much easier to give you accurate answers. The link below explains how to set up a CodePen demo.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Once you have that ready, please post a link to it along with any GreenSock related questions/problems.

 

Thanks and happy tweening.

  • Like 2
Link to comment
Share on other sites

here is a codepen example i put together

 

See the Pen oxKxMz by megaman1 (@megaman1) on CodePen

 

as you can see if you rotate the cube it does not rotate on the spot the origin point seams to be to the left somewhere, how do i fix this?

also
In my real project i want an existing auto centered div to be one of my "cube faces". can I do this without the normal behavior of this div?

What would be the correct perceptive to use?

Is what i am trying to do difficult to do if the divs need to have a fixed max width and % widths on lower screen sizes?

 

one last thing
The codepen demo uses rotationY:500 as the property to animate yet the correct css is transform:rotateY(500)
Why does this work, and where is the documentation for this?

Link to comment
Share on other sites

The CSSPlugin docs explain how rotationY / rotationX, x, y and other transform properties should work: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Look in the sections 2D Transforms and 3D transforms. I think you will find the syntax to be way more concise than CSS and a pleasure to use.

 

It seems like some of these 3D cube issues are not really something that the GSAP API handles directly. I think 90% of the problem lies in the CSS and HTML structure. You will probably have to experiment to get the right perspective values.

 

Jonathan and Rodrigo have come up with some great 3D cube demos over the years that perhaps you can use as a starting point.

 

http://codepen.io/rhernando/pen/bc58f04e3f93abc1d063613aeadd2386

http://codepen.io/jonathan/pen/FEbzA

http://codepen.io/jonathan/pen/yYbBGb

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×