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

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

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

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

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

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

1 个答案: