如何使指南针mixin transform-origin生效

Question

我transform在罗盘中遇到了一个奇怪的问题.

我想将轴移动transform-origin(50% 100%)到底部,如果我将它键入firebug,这是有效的.

但是,如果我使用mixin,@include transform-origin(50% 100%)它在firebug中是不可见的.仅应用旋转部件@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;
}

可能是什么原因？

如果我-moz-transform-origin:50% 100%;直接在我的SASS中写下这一行,它也会起作用.

Answer 1

指南针认为,你只传递一个参数(没有逗号)并尝试添加另一个参数.在指南针的文档中,您可以找到以下评论:

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

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

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