Jump to content
Search Community

rotationX only see half image while rotating

sirhclluk test
Moderator Tag

Go to solution Solved by sirhclluk,

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'm using rotationX on a png. I only see half the png on rotation. When it stops I see the whole image.

See something missing in the code? Thanks


TweenLite.set(pie, {perspective:800, transformPerspective:800});


var tl;
  tl = new TimelineLite({}); 
  tl.to(pie, .5, {autoAlpha:1, immediateRender:false})
    .from(pie, 1.5, {x:"-=100", scale:1.5, rotationX: 90, transformOrigin:"left center", ease:Power2.easeInOut}, "-=.5")
Link to comment
Share on other sites

Hi sirhclluk  :)


I'm not seeing anything in the code that would explain half of your image disappearing upon rotation. That being said, I don't know what the pie variable is or anything about your CSS. Is pie the image itself or some containing div? Is it going outside the bounds of something that has overflow set to hidden? It's tough to troubleshoot without a CodePen demo. If you could provide one for us, that would get you the best answers.




Happy tweening.


  • Like 4
Link to comment
Share on other sites

Hello sirhclluk


I noticed on LINE 1 you are mixing CSS perspective and transformPerspective on the same element.


Since you have no children for your .red div, then there is no need to use perspective property. You should then only use transformPerspective on .red element.


You really shouldn't be mixing perspective and transformPerspective on the same element. That will cause rendering issues, and webkit has a bug when both are used on the same element.


I would recommend either using only:

So it is best to just use either or depending on what your needs are.



  • Like 2
Link to comment
Share on other sites

Thanks for the response guys. Yes it works just fine in codepen. 

So the problem is when published from google web designer. 

In that case in Safari only, half the image is shown during rotation.

I've asked in their forums also with no luck yet.



Link to comment
Share on other sites

As far as I know, Safari is the only browser that will render elements in a way that intersects the planes. So imagine two pieces of paper, one laying on top of the other one, and then you take the top one and rotate it on its x-axis - Safari would make half of it go behind the paper it was sitting on top of, chopping it off visually. An argument could be made that this is more "correct", but it's just annoying for a lot of web developers. 


It sounds like you're running into that issue. Perhaps try offsetting the element's "z" (or "translateZ" in some tools), kinda like picking up that piece of paper and making it float above the other one enough to not have them intersect when the rotation occurs. 

  • Like 1
Link to comment
Share on other sites

  • Solution

I tried moving the translate3D z around before, but just small numbers like 2 or 10.

A translate3D z of 80+ on the rotating object seems to do the trick. Or around -30 on the shape below it.

But the better solution for this particular banner was to just remove the color div below it that the object was sort of slicing through.


Thanks for the help. Here's to cool movements.

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