How to get the compass mixin transform-origin to take effect

Question

I've a strange problem with transforms in compass.

I want to move the axis with transform-origin(50% 100%) to the bottom, which is working if i type it into firebug.

But if I use the mixin @include transform-origin(50% 100%) it's not visible in firebug. Only the rotation part is applied @include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg));.

In compiled CSS I can find this line but it's not applied somehow and written with three values. -moz-transform-origin:50% 100% 50%;

My SASS looks like this:

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;
}

What could be the reason for that?

If I write the line -moz-transform-origin:50% 100%;directly in my SASS it's working too.

Answer 1

Compass think, that you pass only one parametr(without comma) and try to add another. In the documentation of the compass you can find this comment:

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

so you should use the following code:

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