Jump to content
Search Community

need help in 3d tranformation urgent css3

avijit4all test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

i need the tranformation shown in this tutorial .. the 2nd one in transformPerspective Vs perspective

 

 

http://www.greensock.com/css3/

TweenMax.to(box2, 3, {rotationY:360, transformOrigin:"left 50% -200"})

 

 

please i am new to this , so if anyone can give me example done with that transformation  using a image instead of the box...please help me out..

my email id - alexsmithsti@gmail.com

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

In that particular example the blue squares are contained into a parent element. In the first all the elements have a perspective assign to it, giving the impression that all rotate in the same way. In the second set of squares only one perspective is given to their parent element, like this a more real effect is obtained.

 

Try the following exercise, rotate something slim, like a playng or business card. First in front of you and then one feet to your right, you'll see what I mean.

 

The code to obtain those examples is quite simple, all you have to keep in mind is that for one of the samples there's only one container, that gives you a real perspective effect, meanwhile when you create a container for each element and apply the same perspective value to every container the is like you're standing in front of each element.

 

Here you can see the code:

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

 

Feel free to fork and modify the code to meet your needs if is not what you're after.

 

Finally a good source to understand how 3D transforms works take a look at this links:

 

W3C specification on CSS3 Transforms:

http://www.w3.org/TR/css3-transforms/#transform-3d-rendering

 

David DeSandro's guide to understand how CSS 3D transforms works:

http://desandro.github.io/3dtransforms/

 

Best,

Rodrigo.

  • 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.
×
×
  • Create New...