css - 如何让compass 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;
}

这可能是什么原因？

如果我直接在我的 SASS 中编写 -moz-transform-origin:50% 100%; 这行，它也能正常工作。

Answer 1

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

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

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

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