Question

我是这个编码世界的新手。在谈到Javascript时，我对HTML和CSS的了解最少且不存在。

我正在开展一个项目，我需要创建一个视差网站，每个部分都是对角线划分的。视差位几乎已经完成，但我正在努力使对角线在不同的浏览器上运行。使用其他人在这个论坛中提供的一些代码，我必须为Firefox做这个，但仍需要让它在其他浏览器或至少Chrome和Safari上运行。有人可以帮忙吗？

HTML

<div>
  <section><a href="#1"></a></section>
  <section><a href="#2"></a></section>
</div>

CSS

html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative;  }
section { 
height        : 500%;
background    : red; 
width         : 500%;
position      : absolute;
top           : -100%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}

section + section { 
background: #333;    
top       : 80%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
} 

section a { display: block; width: 100%; height: 100%; cursor: pointer; }

JS

$(function() {

$(window).on('resize', function() {
   var h = $(document).height(),
       w = $(document).width(); 

   var angle = ((Math.atan(h/w) * 10.29577951308232));
   $('section').css("-moz-transform", "rotate(" + angle + "deg)")

})
.triggerHandler('resize');
});

Answer 1

正如Rob W.所指出的，jQuery将（在最近的版本中）为您添加供应商前缀。但是，这意味着你不应该自己做：

$('section').css("transform", "rotate(" + angle + "deg)");

这适用于Chrome和Firefox： Fiddle

供应商javascript的前缀

1 个答案: