Javascript JQuery中的CSS-多種轉換

Question

我是Java語言的新手，因此遇到問題：

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

僅輪換有效，而translateY不起作用。 所以，我想要的是在那里有多個轉換。 普通的CSS代碼如下：

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

我究竟做錯了什么？ 可能缺少一些符號。

Answer 1

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

Answer 2

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>

Javascript JQuery中的CSS-多種轉換

問題描述

2 個解決方案

解決方案1
0 2015-04-30 11:40:21

解決方案2
0 2015-05-11 15:39:28

Javascript JQuery中的CSS-多種轉換

問題描述

2 個解決方案

解決方案1 0 2015-04-30 11:40:21

解決方案2 0 2015-05-11 15:39:28

解決方案1
0 2015-04-30 11:40:21

解決方案2
0 2015-05-11 15:39:28