如何让罗盘mixin transform-origin 生效

Question

我对罗盘中的transforms 有一个奇怪的问题。

我想将带有transform-origin(50% 100%) 的轴移动到底部，如果我将它输入到萤火虫中，这将起作用。

但是如果我使用 mixin @include transform-origin(50% 100%) 它在萤火虫中是不可见的。 仅应用旋转部分@include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg));。

在编译后的 CSS 中，我可以找到这一行，但它并没有以某种方式应用，而是用三个值编写的。 -moz-transform-origin:50% 100% 50%;

我的 SASS 看起来像这样：

div#loader {
  @include transition-property(transform);
  @include transition-duration(3s);
  @include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg));
  @include transform-origin(50% 100%); // This is not taking affect in final css
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

这可能是什么原因？

如果我在我的 SASS 中直接写 -moz-transform-origin:50% 100%; 行，它也可以工作。

Answer 1

指南针认为，您只传递了一个参数（不带逗号）并尝试添加另一个参数。在指南针的文档中，您可以找到以下评论：

// Transform-origin sent as individual arguments:
//
//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )

所以你应该使用以下代码：

@include transform-origin(50%, 100%);