How to make compass mixin transform-origin take effect

Question

I have a strange problem with transformthe compass.

I want to move the c axis to transform-origin(50% 100%)the bottom, which works if I enter it in firebug.

But if I use mixin @include transform-origin(50% 100%), it does not appear in firebug. Only part of the rotation applies @include transform(perspective(600px) rotateX(45deg) rotateY(0deg) rotateZ(0deg));.

In compiled CSS, I can find this line, but it does not apply anyway and is 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?

If I write a line -moz-transform-origin:50% 100%;directly in my SASS, it works too.

Answer 1

, ( ) . :

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

:

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