Question

我有一个元素需要在mousemove上进行一点变换（就像我猜的视差） codepen.io/anon/pen/PJQqjW

但是在Mozilla中，当我不移动鼠标时，元素有一个神器，就在它的中间。

有什么不对？

Answer 1

firefox中有一个已知的错误＆gt; https://bugzilla.mozilla.org/show_bug.cgi?id=818109

你可以使用像translate3d这样的hax，但这会稍微移动你的元素，这就是我猜你不会喜欢的东西。

此外，造成此错误的原因是您使用179deg，而是使用180deg，问题似乎消失了。

请参阅代码段

＆＃13;

.triangle {
  border: 4vw solid transparent;
  border-top: 13vh solid red;
  width: 0;
  height: 32vh;
  position: fixed;
  top: 0;
  z-index: 9;
  left: 0;
  transform: rotate(180deg);
}

＆＃13;

<div class="triangle"></div>

＆＃13;

但是为什么不首先让三角形旋转（边框底部而不是边框顶部）？

＆＃13;

.triangle {
  border: 4vw solid transparent;
  border-bottom: 13vh solid red;
  width: 0;
  height: 32vh;
  position: fixed;
  top: 0;
  z-index: 9;
  left: 0;

}

＆＃13;

<div class="triangle"></div>

＆＃13;

转换属性会导致工件

1 个答案: