JavaScript的供应商前缀

Question

我是一名新手，对编码这个世界还不熟悉。我对HTML和CSS的了解很少，当涉及到Javascript时就更无从下手了。

我正在做一个项目，需要创建一个视差网站，每个部分都被对角线划分。视差效果基本完成了，但我在尝试让这些对角线在不同的浏览器上都能正常使用时遇到了麻烦。用别人在论坛中发布的一些代码，我已经实现了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');
});

- Gonzalo Fernandez

---

你只是针对moz transform属性吗？我假设如果你将moz改成WebKit，它会在chrome中工作？ - leaksterrr

jQuery 1.8+会自动添加厂商前缀。 - Rob W

Leaksterr，我尝试了那个方法，但还是不行... - Gonzalo Fernandez

Rob W，我刚刚添加了JQuery 1.8，但在Chrome上没有任何反应...我快疯了。我以为这会是一个非常简单的修复。 - Gonzalo Fernandez

Answer 1

正如Rob W.所指出的那样，jQuery现在会为你添加供应商前缀。但是这意味着你不应该自己添加。

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

这对我来说在Chrome和Firefox中都有效：Fiddle

- Ingo Bürk