Javascript JQuery 中的 CSS - 多种转换答案

【问题标题】：CSS in Javascript JQuery - Multiple TransformsJavascript JQuery 中的 CSS - 多种转换
【发布时间】：2015-04-30 11:12:10
【问题描述】：

我是 Javascript 新手，但遇到了一些问题：

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

只有旋转有效，翻译无效。所以，我想要的是在那里有多个转换。通常的 CSS 代码如下：

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

我做错了什么？可能缺少一些符号。

【问题讨论】：

你能添加你的例子的小提琴吗
这里：jsfiddle.net/Lvz1paf5 所以这就是没有 translateY 的情况。
那么有什么问题。它似乎在 Chrome 中都可以做到。我颠倒了这个顺序以使其保持在屏幕上：jsfiddle.net/TrueBlueAussie/Lvz1paf5/2
哦，好吧，它有效！呃，我不知道我做错了什么。非常感谢:)
似乎它在 Firefox 中不起作用。

标签： javascript jquery css transform

【解决方案1】：

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

【讨论】：

【解决方案2】：

The problem with firefox 是 $body.scrollTop() 返回 0。请改用 $(window).scrollTop()。

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>

【讨论】：