0

I am trying to combine rotationY and translateZ in a website, but it seems translateZ cancels the rotation.

I created a codepen isolating my problem:http://codepen.io/3MO/pen/zNadrB

When I click on show Left, the box is showing its left side by adding a specific class 'show-left'. Then I click on push back, the box is pushed to the back by adding the 'push-back' class. The front side is rotated back, while the classes of the div are now 'show-left push-back'.

The css and javascript are quite basic:

.show-left {
   transform: rotateY(90deg);
}

.push-back {
   transform: translateZ(-1000px);
}

On the javascript side :

window.onload = function () {
   $('#showLeft').on('click', function (event) {
        $('#mainBox').addClass('show-left');
   });

   $('#pushBack').on('click', function (event) {
        $('#mainBox').addClass('push-back');
   });
}

What do I do wrong ? Thanks!

Joel
  • 669
  • 7
  • 25
  • 1
    It is the expected behavior. Just like with any other CSS property, when you provide two different values for the same property in two different selectors then only the most specific or the one that is the latest in the file will win. They are not additive in nature. If you want both both rotation and translation to be applied on the same element then both must be specified as value to the same property. – Harry Feb 05 '17 at 12:18
  • 1
    Think of it this way, give `border: 1px solid red` to the `.show-left` and `border: 1px solid green` to the `.push-back`. After you click show left and push back, what color is the border? Do you see both a red and a green border? – Harry Feb 05 '17 at 12:19
  • 1
    understood. I guessed I expected an underlaying composition. After more testing, I need to define push-back as "rotation(90deg) translateX(1000)". Thanks! – Joel Feb 05 '17 at 14:07
  • You can probably do it like this (just in case somebody clicks pushback first), the `.pushback` selector will have only translation, the `.show-left` will have only rotation but `.show-left.pushback` will have both. This will make sure that both rotation and translation are applied only when both classes are there. – Harry Feb 05 '17 at 14:12
  • I did it, it works, thanks. No I want to push it back and fade it away. When I add opacity:0.5, everything goes south. I updated the codepen accordingly: http://codepen.io/anon/pen/bgKagZ – Joel Feb 05 '17 at 15:05
  • Is there any reason why it behaves like this? How to combine both movement and opacity transitions? – Joel Feb 05 '17 at 15:05

0 Answers0