Jump to content
GreenSock

knalle

can't get css3 3d tranformations working

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

Maybe I've missed something.

Can't get the new 3d transformations working

 

TweenMax.set($('#slide4'), {css:{x:"30px", z:"-100px", zIndex:500}});

 

Why?

Link to comment
Share on other sites

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

I have the latest download (just double checked it).

Also I'm in Chrome and have tried some basic vendor prefixed css properties just to make sure that the trnasformations are working...

 

I'll fiddle something in a minute.

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

Yeah I tried the perspective thing on the container div ('stack').

I've put this css in:

 

 

-webkit-perspective: 550;

-webkit-perspective-origin: 50% 50%;

 

- still isn't working :x

Link to comment
Share on other sites

Nope, it looks like you're using a TweenMax.min.js file from 2012-11-13 (quite stale) - that's before the 3D features were introduced. Please snag the latest version and it should work well for ya. http://www.greensock.com/gsap-js/

Link to comment
Share on other sites

Nope, it looks like you're using a TweenMax.min.js file from 2012-11-13 (quite stale) - that's before the 3D features were introduced. Please snag the latest version and it should work well for ya. http://www.greensock.com/gsap-js/

 

doh! I was so sure I had replaced the files.... sorry - of course works like a charm now :)

  • Like 1
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.
×