Jump to content
Search Community

can't get css3 3d tranformations working

knalle 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

A few questions:

  1. Are you using the latest version of TweenMax? I wonder if you've got a stale version that didn't support 3D transforms (that's a relatively new feature)
  2. What browser are you checking it in? Remember, certain browsers don't support 3D transforms (like IE8 for example)
  3. Can you post a very simple example file or jsfiddle or something so that we can actually see what you're doing in context? It's tough to troubleshoot blind.

Link to comment
Share on other sites

Haven't figured out how to use jsfiddle with gsap (?)

 

but I've uploaded it here:

http://www.knalle.dk/greensock/examples/fiddle.html

it's suppose to be a stack of slides positioned in 3d space - but they are all just sitting at the same spot.

 

all css and js is in the single html file (so perhaps you can inspect it - sorry for the inconvenience)

When I inspect the elements

Link to comment
Share on other sites

Ah, it looks like you just forgot to set a "perspective" on the parent element or "transformPerspective" on the target element itself. Please read the "3D Transforms" section of http://www.greensock.com/css3/ to understand the concepts. And for the record, this isn't a TweenMax-specific requirement - it's a browser thing.

 

Does that clear things up for you?

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...