Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Problem with rotationX and top position

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

Again I apologize for the english, I'm using Google Translate.


I'm having a problem with an img object, I'm animating it with rotateX, is working perfectly. But when it animates, is set to top his property, and he lines up in my website is at bottom. So when you resize the window, it does not follow the footer and the layout misalignment.


How can I solve this?


I'm using:

TweenMax.from(cenario_rodape,	 0.5, { css:{ rotationX:-90, transformOrigin:"center bottom" }, ease:Back.easeOut })


Thank you.

Link to comment
Share on other sites

When you apply a rotationX to an element a matrix3D is set on the element's style attribute that looks like:

<img src="image.jpg" style="-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99996, -0.00787, 0.00001, 0, 0.00787, 0.99996, -0.00249, 0, 0, 0, 1);">


I think the problem is that the transform matrix is also handling the x/y translation so there may be a conflict with other styles that you have that are setting top and left.


Try placing your img in a div. apply rotationX to the img but add the styles to the div that control where it should be positioned relative to the bottom of the page.

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.