CSS in Javascript JQuery - Multiple Transforms

Question

I'm new to Javascript and I'm having problems with this:

$video.css({
    'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg) translateY(' + $body.scrollTop() + 'px)'
});

Only the roation works but not the translateY. So, what I want is to have multiple transforms in there. A usual CSS code would be like:

transform: rotate(10deg) translateY(10px);

What am I doing wrong? Probably missing some symbols.

Here: https://jsfiddle.net/Lvz1paf5/ So this would be it without translateY. — wupto, Apr 30 '15 at 11:24
So what is the problem. It appears to do both in Chrome. I reversed the order for this one to keep it onscreen: https://jsfiddle.net/TrueBlueAussie/Lvz1paf5/2/ — iCollect.it Ltd, Apr 30 '15 at 11:29
Oh well, it works! Uh I have no idea what I did wrong. Thanks a lot :) — wupto, Apr 30 '15 at 11:31

score 0 · Answer 1 · answered Apr 30 '15 at 11:40

0

$video.css({
    'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg),
    'transform': translateY(' + $body.scrollTop() + 'px)' 
});

answered Apr 30 '15 at 11:40

John williams

654
1
8
22

score 0 · Answer 2 · edited May 23 '17 at 12:30

The problem with firefox is that $body.scrollTop() returns 0. Use $(window).scrollTop() instead.

var $video = $('.video'),
  $body = $(document.body),
  $window = $(window),
  bodyHeight = $body.height();

$(window).scroll(function() {
  // Use $(window) instead of $(document.body)
  $video.css({
    'transform': 'rotate(' + ($window.scrollTop() / bodyHeight * 360) + 'deg) ' +
                 'translateY(' + $window.scrollTop() + 'px)'
  });
});

body {
  height: 3000px;
  margin: 0;
}
.video {
  background: black;
  width: 100px;
  height: 70px;
  position: fixed;
  top: 20px;
  left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="video"></div>
</body>

CSS in Javascript JQuery - Multiple Transforms

2 Answers2