Issues with rotationX, rotationY with <li>

[cerulean]

I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case.  I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer)

<ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li>
<li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li>

</ul>

Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks.  rotationZ works.  If someone could point out the obvious point I'm missing I'd be grateful.

initMenus();


    function checkMenuItem(theTween) {
        if ($(theTween.target).hasClass('current-menu-item')) {
            tl = new TimelineMax();
            tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5});
            tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1});
        }


    }

    function menuover() {
        var tl = new TimelineMax();
        tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5});
        tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25});
    }

    function menuout() {
        TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1})
    }


function initMenus() {
    var tl = new TimelineMax({});
    $('#menu-main li').css('visibility','visible');
    $('#menu-main li ').hover(menuover,menuout);
    tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1);
}

[Jonathan]

Hello cerulean, welcome to the GreenSock Forum!

 

Without seeing your CSS for your LI tags it will be hard to see what is going on.

 

Try adding position:relative or position:absolute to your LI tags CSS stylesheet rule, so the transforms can be applied correctly. That will take the elements out of the flow of the document.

 

Also if you create a codepen demo example we can better help you by seeing your code live in an editable environment.

 

Here is a nice video tut by GreenSock on How to create a codepen demo example.

 

Hope this helps!

[cerulean]

Thanks! — position:relative seems to do it.  Why is that?

 

Yes, I should have posted a code pen — but the HTML and CSS is immense for this project and winnowing it down seemed a massive undertaking if I was missing the obvious (as I was). 

[Jonathan]

No worries! Just keep in mind anytime you want to use CSS Transforms that the element must have position:absolute or position:relative .. when you add that CSS you are taking the element out of the flow of the document, so when the element is transformed it won't affect elements around it.

 

Taken from W3C CSS Transforms Module Level 1

• For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area.

Also here is a link to the CSSPlugin docs that have great info when applying CSS Transforms with GSAP

 

In my opinion it is always better to use position:absolute. And then make one of its parent s have position:relative. So this way you position your transformed element absolutely, relative to its parent... for greater placement control.

 

But that is just my one cent!