translate in Z not working, using TweenLite

[eartha5]

Hi folks,

 

I've been googling this to death and can't figure out why I can't set the Z position of these divs using TweenLite (which is writing translateZ transforms, so presumably that way, either).

 

Any help, taking a look at the plnkr here?

http://plnkr.co/edit/OKIzzKlNv7yJVVHlraCR

 

See the _setLayoutTargets function and _moveEm function...

 

See the Pen by edit (@edit) on CodePen

[Jonathan]

Hello eartha5, and Welcome to the Greensock Forum!

I'm not my computer right now, but what you can do is add transformStyle: preserve3d (transform-style) to your tween with Z and add perspective:1000px to its parent element or adding transformPerspective ( transform: perspective(1000px) )  to the element with Z.

• transform-style : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
• perspective : https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
• using CSS transforms : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

Hope that helps!

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Basically you're mishandling some CSS properties.

 

First the Z value you're passing is way too small to even notice a difference, and second the element's container has a perspective value of zero, so no matter what value of Z you apply or tween, there's not going to be any visible effect in the element:

//at line 108 perspective is set to 0
function _initSlidePosition(jSlide) {
      // var topPos = _containerEl.outerHeight()/2 - jSlide.outerHeight()/2;
      // jSlide.css({left: (_containerPadding.left), top: topPos});
      TweenLite.set(_containerEl, {perspective:'0px'});
    }

// at line 114, the value of z is 1, too small
function _setLayoutTargets() {
      _slides[0].translateTargets = {
        x: _activeDims.width/2 - _slideDims.width/2 , 
        y: _activeDims.height/2 - _slideDims.height/2 ,
        z: -1,
        scale: 1
      };

If you give bigger values you'll notice the desired effect.

 

Also you can use the CSS Plugin to set up a default transform perspective for your entire project, it makes your life quite easier and you won't have to wory about the perspective in any element again:

CSSPlugin.defaultTransformPerspective = 750;
//you can use any value you want, I always start at 750 and change it if necesary

Rodrigo.

[eartha5]

Thanks for the replies guys.  So I'm not actually trying to gain a realistic 3D positioning of these elements, so much as just trying to use translation to achieve the best performance for swapping the position of these things around.  I was using perspective of 0 to eliminate perspective effect and just get the elements to display at exactly the x and y values I pick.  I was hoping that translating on Z would just move these elements behind or in front of on another according to their z positions, but I can't get them to ever overlap according to the z positions I've specified.  0 for the first one and -300 px for the other two, should put the other two behind the first one, no?  Is that not how it works?

[eartha5]

Hold up.  I think i got it.  I see that you apply preserve-3d to the container element and that gets the children behaving properly.  Thanks!!!!!

[Rodrigo]

Hi,

 

Glad that you got it working, but beware that preserve-3d is not supported by any version of internet explorer (surprise, surprise ), so that approach won't work in those particular browsers (IE 10-11).

[Jonathan]

Yep the mighty Rodrigo is right! ...  IE10-IE11 do not support transform-style preserve-3d. So to get around it in IE10-IE11, you can't just transform the parent... you also have to transform each child of the element separately.

 

Take a look at the MSDN Transforms docs (scroll down to transform-style):

 

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx

 

On the above Microsoft's Transforms link, Microsoft states:

 

"At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

 

So there is a workaround..  for modern browsers that support transform-style: preserve-3d, you instead apply the CSS perspective function to the elements parent. But for IE10 - IE11 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function.

 

I made an example for transform-style IE10-IE11 workaround for a 3d cube using CSS animation and transform perspective, that does work, (test this below link in IE10 or IE11):

 

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

Have a great day

[eartha5]

Hey, yeah I ran into that but I am able to just use z-index property for the case of IE.  I flip z-index halfway through each animation and it mimics the effect of the translateZ where transform-style is supported.  I'll  check out your codepen, jonathan.  I've still got a lot to learn! Thanks guys.